Resolve local image paths for background-url

[de-es]

What happened?

I would expect that the background-url attribute would be resolved the same way the src attribute is for images.

Resolve local image paths is turned on in settings. Resolving src works fine.

Plugin version: 2.3.2

OS

Linux

What IDE are you facing the problem in?

PhpStorm

Problem description

<mj-hero
           mode="fluid-height"
           background-width="600px"
           background-height="338px"
           background-url="path/to/my/image.jpg"
           background-color="#c6c6c6">
            <mj-button background-color="#183A64" href="https://github.com">Go to Github</mj-button>
</mj-hero>

Expected behaviour

<td background="file:///full/path/to/my/image.jpg" style="background:#c6c6c6 url('file:///full/path/to/my/image.jpg') no-repeat center center / cover;background-position:center center;background-repeat:no-repeat;padding:125px 0px;vertical-align:top;">

Actual behaviour

<td background="path/to/my/image.jpg" style="background:#c6c6c6 url('path/to/my/image.jpg') no-repeat center center / cover;background-position:center center;background-repeat:no-repeat;padding:125px 0px;vertical-align:top;">

Steps to Reproduce

Use background-url in any appropriate component.

Using background-url="file:///full/path/to/my/image.jpg" is working as a temporary solution.

Important Factoids

No response

References

86

I read and aggree to the contribution guidelines

• [X] I read and aggree to the contribution guidelines

[timo-reymann]

Heya @de-es, thanks for creating a issue for this. Will implement and will be released in next version :) Will keep you updated here.

[timo-reymann]

I took a first look, will try to implement it till end of next week :)

Analysis:

• Generated HTML for background-image is rendered as inline style (other attributes can be ignored since they are not used by embedded chrome anyway)
• JSoup does not provide inline style parser -> need to implement custom

Draft for solution

• Iterate over all elements in JSoup DOM: Document#select("*")
• Check if element has inline style: Element#hasAttr("style")
• Check if inline style contains background: url( using regex and capture group
• Replace if found

Code adjustment

• MjmlRenderer#convertRelativeImagePathsToAbsolute

[de-es]

There's no hurry. Appreciate your immediate feedback.

[timo-reymann]

[NEW SNAPSHOT] Latest snapshot mentioning this issue has been published to marketplace: 2023.02.14-768

[timo-reymann]

Snapshot tested, works fine.

Will release 2.4.0 after approval from Jetbrains will be available for install 🚀

Will close this for now, if you have/remarks with latest release feel free to comment here or create a new issue.

[de-es]

Works fine here too. Thank you very much! :partying_face: