Resolved - How to use webp image with Aurelia and Webpack

Help Requests
#1

I have a background image in jpg format that I’ve been using via css for a background image. I’ve converted the image to webp format. I now want to use that image for the background. I changed my css to point to the new image.

However, webpack crashes when trying to build my app. It would appear it doesn’t know what to do with the webp image reference. And I don’t know what to do with Webpack to tell it how to handle the image.

Has anyone done this? Can someone help me with the code to tell Webpack what to do with webp images?

#2

Why don’t you convert it to a data URL and save it as text in your css or as a constant in your code?

#3

To be honest, I’m not sure I follow what you’re saying. I have this in my css

.signin {
   background-image: url("../../static/justice.webp");
   ...
}

I’m not sure I understand what you mean by “save it as text in your css or as a constant in your code”.

#4

Check here for more info:

1 Like
#5

Awesome! Thanks. That worked great!