Unable to properly parse image-url when used in a background-image url()

[TotomInc]

I'm using a lot of background-image: url(...) and images are incorrectly parsed (by the regex I think?).

Here is an example output:

url(https://my-api.com:1337/my-image.png) will generate /dist/_images/my-image.png) instead of /dist/_images/my-image.png.

[d1urno]

Thanks for reporting! I'll look into it soon :)

[d1urno]

It will be dificult for me to find the regex needed to support url sources, those are more complex than the regular src="" pattern. There may not be double quotes on file names so in this case the regex was easier. But that is different with url() pattern, since there may be () parenthesis on file names and we need to diferentiate those from the actual code enclosing.

For a start I can think of the need to find a regex against the following kind of samples (regex101 here):

url(https://my-api.com:1337/my-image.png.png)
url('https://my-api.com:1337/my-image.png.png')
url("https://my-api.com:1337/my-image.png.png")

url(https://my-api.com:1337/my-image.png.png?itok=de78r5)
url('https://my-api.com:1337/my-image.png.png?itok=de78r5')
url("https://my-api.com:1337/my-image.png.png?itok=de78r5")

url(https://my-api.com:1337/(myimage)(nice).png.png)
url('https://my-api.com:1337/(myimage)(nice).png.png')
url("https://my-api.com:1337/(myimage)(nice).png.png")

url(https://my-api.com:1337/(myimage)(nice).png.png?itok=de78r5)
url('https://my-api.com:1337/(myimage)(nice).png.png?itok=de78r5')
url("https://my-api.com:1337/(myimage)(nice).png.png?itok=de78r5")

That regex should grab the exact image link leaving out everything else. Just as GitHub did when I pasted the previous list 😆. May be @emiliobondioli could help us finding it.

[emiliobondioli]

Hi @d1urno,
I've been working on a similar module and I'm still trying to figure out the best regex for this use case, since the one I'm using is still finding false positives in the minified javascript chunks. I've put it up here if you want to take a look!

[d1urno]

@TotomInc using double quote syntax like url("https://url/to/my-image.png") should work for now.

@emiliobondioli nuxt-magpie is looking good, thanks for your contributions!

[case112]

Hi! First I want to say that this is a great module and has been working well for me so far!

Recently I used a style binding on an element and I'm running into the issue as mentioned above - extra ')' at the end of the image file. Since I'm still quite new to vue/nuxt I was wondering that maybe there is a better way to tackle this issue using different binding or logic in vue?

[d1urno]

@case112
Thank you! I believe you could try to add double quoutes "" to that import as well, like this url("${banner_data.image_url}") . If that doesn't work you could try to write that style binding as a computed property and then load it to the element.

computed: {
  getStyle() {
    return { 
      backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.15), url("${this.banner_data.image_url}")` 
    }
  }
}

<div class="hero-image" :style="getStyle">