Geek Answers Handbook

Webpack - requires the use of images using File-Loader

I am using Webpack for my React application.

I installed "File-loader" and "Url-loader" in my webpack configuration.

However, I am not sure how to associate images with my components. I keep 'src' for the image in the Data.js file, from where I transfer the data for the image to the reaction component.

My webpack.config.js:

... const PATHS = { app : path.join( __dirname, "app" ), build : path.join( __dirname, "build" ) }; const common = { entry : { app : PATHS.app }, output : { path : PATHS.build, filename : "bundle.js" }, module : { preLoaders : [ ... loaders : [ { test : /\.css$/, loaders : [ "style", "css" ], include : PATHS.app }, { test : /\.jsx?$/, loader : "babel", query : { cacheDirectory : true, presets : [ "react", "es2015" ] }, include : PATHS.app }, { test : /\.(jpg|png)$/, loader : "file-loader?name=[name].[ext]", include : PATHS.app } ...

Im my comment submission component, Im just using require to extract the image:

 const PreviewTemImgParent = ({ data }) => { let img = require( data.get( "src" )); return( <div className = "card previewImgParent"> <img src = { img } ...

In the Data.js file there are absolute paths (the main application folder) for each image (maybe I'm wrong):

 export const previewTemImgData = Map({ body : List.of( Map({ // using immutable.js src : "app/css/asset/template/png/body/GatheredAtEmpireLine.png", alt : "image", className : "flipParent", ...

The global catalog image, for which it costs:

enter image description here

I wonder where I make mistakes and how to resolve this?

EDIT: After reading, I assume that webpack needs a link for the relative position of the image, so I changed webpack.config.js as follows:

 ... output : { path : PATHS.build, publicPath : "/", filename : "bundle.js" } ...

However, this does not solve the problem. Leadership will be highly appreciated.

+5
source share
2 answers

Suggestions:

1. Use url-loader for images.
By specifying limit in your webpack configuration, for example: url-loader?limit=8000 if the file is less than 8000 bytes. url-loader works like file-loader . Paste the files into the output of the package for the master record. If not, see paragraph 2.

2.Use the url (s) in css / scss to use images
Here is an example that runs Webpack and url-loader:
background: url('../images/heroBanner.png') no-repeat center center fixed;

And since the file is large enough, webpack converts the file in the same way as other packages into the output directory. It will send an HTTP request for this image when loading a web page.

enter image description here

https://github.com/EcutDavid/EcutDavid.imtqy.com/blob/8346f18dccdae18c4d6e98eb9b8cc51d62338cb5/src/styles/Header.scss#L2

+3
source

webpack now does not support an asynchronous resource, which means that if you want to request an image, you should just send the path to it. similar:

 let img = new Image(); img.src = require('./images/1.jpg');

The image URL cannot be a variable because when the web package binds your code, it does not run your code, so it cannot know the value of your variable.

if you really want to require asynchronously. you can try to use require.ensure

+3
source

More articles:


All Articles