Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inline HTML background-image assets are not parsed #1855

Closed
jono-hayward opened this issue Aug 6, 2018 · 2 comments
Closed

Inline HTML background-image assets are not parsed #1855

jono-hayward opened this issue Aug 6, 2018 · 2 comments

Comments

@jono-hayward
Copy link

馃悰 bug report

As referenced in #541 and #1456, I believe background-image styles defined inline in HTML should be parsed and the images should be treated as assets by Parcel (please correct me if I've misunderstood).

In my test case, this isn't working. The image URLs are left untouched and the images themselves never show up in the dist folder. Doesn't matter if there are quotes around the URLs or not.

馃帥 Configuration (.babelrc, package.json, cli command)

{
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
}

馃 Expected Behavior

In the HTML code provided below, the image URLs should be parsed by Parcel and relevant asset processes run on them.

馃槸 Current Behavior

Nothing happens. The URLs are left untouched and the images never show up in the dist folder. No errors show in the terminal running the Parcel process or the browser console.

Other images defined elsewhere using <img> do get processed correctly. Just not the ones using background-image

馃敠 Context

I'm building a single page web site that uses an image slideshow for part of the content. This slideshow is not used on desktop, only mobile - so if I embedded the images directly in the code using <img> they would be downloaded on mobile devices, wasting time and bandwidth. If I load them using a CSS background-image, I can control the loading somewhat.

Ideally, I'd like to take this even further by defining the images in a data-image-url="..." attribute and load them onto the page completely using Javascript, but I understand if Parcel is limited to parsing the standard attributes that reference images like src and background-image.

馃捇 Code Sample

<div class="c-masthead__background-slideshow c-slideshow" data-slideshow>
    <div class="c-slideshow__slide" style="background-image:url(./img/slideshow--chick-in-hand.jpg)"></div>
    <div class="c-slideshow__slide" style="background-image:url(./img/slideshow--pig.jpg)"></div>
    <div class="c-slideshow__slide" style="background-image:url(./img/slideshow--brahman-cow-with-hand.jpg)"></div>
    <div class="c-slideshow__slide" style="background-image:url(./img/slideshow--ducklings.jpg)"></div>
    <div class="c-slideshow__slide" style="background-image:url(./img/slideshow--dolphins-in-sea.jpg)"></div>
    <div class="c-slideshow__slide" style="background-image:url(./img/slideshow--calf-in-field.jpg)"></div>
    <div class="c-slideshow__slide" style="background-image:url(./img/slideshow--puppy-paw.jpg)"></div>
</div>

馃實 Your Environment

Software Version(s)
Parcel 1.9.7
Node 8.11.3
npm/Yarn 6.3.0
Operating System MacOS 10.13.6
@DeMoorJasper
Copy link
Member

DeMoorJasper commented Aug 6, 2018

This is a feature not a bug.

It has been implemented a lil while back, it's currently staged for the next release. (You can link the master branch if you really wanna use this or clone and yarn/npm link this)
Release date to be determined.

@cj
Copy link

cj commented Nov 12, 2018

@DeMoorJasper was this added in? I'm pointing to the master branch and it's not passing the image.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants
@cj @jono-hayward @DeMoorJasper and others