Html Question posted in
Some basic documentation can be found here.

Html – Image won't load in webpack build

slider.js

...
const initialize = (pImages) => {
  pImages.forEach((image) => {
    const sliderItem = document.createElement("img");
    sliderItem.src = image.src; // this line result in 404 not found in dev tool
    ...
  })
}
...

index.js

...
initialize(
  {
    src: "image relative path here";
  }
);

im using webpack 5, i can load image by src property in html file and by url("") in css file … but not this dynamic path in js. Can anyone tell me why and how to solve it?

i don’t want to use import someimage from "some image path" because i want this to be dynamic so i can use images from database or image that user upload.

Tags:

2

Answers


  1. 0

    place your images in public folder in your root direcotry of your project and acces it as follows:

    const initialize = (pImages) => {
  pImages.forEach((image) => {
    const sliderItem = document.createElement("img");
    sliderItem.src = `/images/${image.src}`;  
    ...
  });
};

    webpack cannot automatically resolve paths that are set dynamically at runtime because these paths are not known during the build process therfore it results in 404

    Login or Signup to reply.
  2. 0

    If an image isn’t loading in a Webpack build, it could be due to incorrect path configurations, missing file loader configurations, or issues with the way assets are handled in production mode. Ensure that the image is correctly imported and that file loader rules (like file-loader or url-loader) are properly set up in your Webpack config. Also, check that the image paths are relative to the build output directory and that they match how the assets are referenced in your code. If you’re using dynamic imports, make sure Webpack is correctly resolving them. Additionally, confirm that the images are included in the build output by inspecting the generated files.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search