Parcel: background image using html inline styles is not working

[OmranAbazid]

This a 🐛 bug report

I'm trying to use HTML inline styles to show a background image to a div. This is done inside HTML

code directly.

🎛 Configuration (package.json)

  "scripts": {
    "start": "parcel index.html"
  }

🤔 Expected Behavior

I expect images to work using the inline style background image even if the URL is local

😯 Current Behavior

the image does not appear and

When i open the URL of the image 'localhost:1234/images/image.jpg'

it is like opening localhost:1234

This only happens when I use a local image, if I use an image URL, it works normally.

💁 Possible Solution

images works using the inline style background image even if the URL is local

🔦 Context

Im trying to use an image slider that fills the whole window. That is why i need to inline image background URLs inside HTML

💻 Code Sample

This does not work

<div class='bg' style="background: url('./images/april-2015.jpg') no-repeat center center fixed"></div>

This works

<div class='bg' style="background: url(http://news.images.itv.com/image/file/626702/img.jpg) no-repeat"></div>

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | latest
| Node | latest
| npm | latest
| Mac |

[devongovett]

We do not currently parse inline styles in HTML. This would be a good feature for someone to work on.

Can you put your CSS in an external css file instead? Parcel will process those already.

[JeffreyRJohnson]

a local background image won't work with external css either .

[jeanlucaslima]

How can I overcome this? I have the same issue, no images loading, is there a way to at least manually work around?

[Nathanlee2010]

still not working !

[CheviSutt]

Im having the same problem, the file is acting like its local in github but the browser doesn't render it. When I inspect the page in the browser the image is not in my css.

[fernandoxu]

same problem，at last I use webpack instead......

[DeMoorJasper]

It's really not hard to implement this, certainly now that we have Vue.js support it's just copying over some of the parts from VueAsset and it should work, both Inline JS and Inline Style

[mohammadnazari110]

<div class="img-banner" :style="{'background-image': 'url(' + require('./assets/media/baner1.jpg') + ')'}"></div>

[Arimanecro]

A year had passed..and this situation has not changed :(

[louisaoge]

<div class="img-banner" :style="{'background-image': 'url(' + require('./assets/media/baner1.jpg') + ')'}"></div>

this worked for me