Fabio Pohl
Fabio Pohl

Reputation: 31

How to load images in webpack 5 without using JavaScript

I hope this question is not completely stupid. I am currently building a website using only plain HTML in Webpack. When I try to load images as usual, using the img tag and the src attribute, my images are not displayed. I found this in the webpack documentation. But there it only describes how I load images via JavaScript.

webpack Documentation

Upvotes: 0

Views: 1231

Answers (2)

Fabio Pohl
Fabio Pohl

Reputation: 31

For all those who have a similar problem. You must first load the html-loader to be able to load images in your HTML files.

Upvotes: 3

Eriks Klotins
Eriks Klotins

Reputation: 4180

You need to specify image urls as described in the documentation. Then, Webpack will bundle everything together, place your images in the output folder and generate the final URL.

Now, when you import MyImage from './my-image.png', that image will be processed and added to your output directory and the MyImage variable will contain the final URL of that image after processing.

Webpack uses JS to process all the files, however JS may not be needed to load the images on the page.

Upvotes: 0

Related Questions