[英]Webpack - Require Images Using File-Loader
我正在使用Webpack作为我的React应用程序。
我在我的webpack配置中安装了“File-loader”和“Url-loader”。
但是,我不知道如何将图像链接到我的组件。 我在'Data.js'文件中保存图像的'src',从那里我将图像的数据传递给react组件。
我的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
}
...
我的反应演示组件,我只是使用require
来检索图像:
const PreviewTemImgParent = ({ data }) => {
let img = require( data.get( "src" ));
return(
<div className = "card previewImgParent">
<img
src = { img }
...
Data.js文件具有每个图像的绝对路径(主应用程序文件夹)(我可能在这里出错):
export const previewTemImgData = Map({
body : List.of(
Map({ // using immutable.js
src : "app/css/asset/template/png/body/GatheredAtEmpireLine.png",
alt : "image",
className : "flipParent",
...
全球目录图像的价值:
我想知道我在哪里犯错误以及如何解决这个问题?
编辑:阅读后,我认为webpack需要参考图像的相对位置,所以我修改了webpack.config.js到以下:
...
output : {
path : PATHS.build,
publicPath : "/",
filename : "bundle.js"
}
...
但是,这并没有解决问题。 指导将非常感激。
webpack现在不支持异步资源,这意味着如果你想要图像,你应该只向它发送图像路径。 就像这样:
let img = new Image();
img.src = require('./images/1.jpg');
图像的url不能是变量,因为当webpack捆绑你的代码时,它不会运行你的代码,所以它不能知道变量的值。
如果你真的想要异步要求。 你可以尝试使用require.ensure
建议:
1.使用url-loader
获取图像。
通过在webpack配置中指定limit
,例如: url-loader?limit=8000
,如果文件小于8000 Byte。 url-loader
工作似乎是file-loader
。 将文件嵌入主条目的包输出中。 如果没有,请参见第2点。
2.使用css / scss中的url(地址)来使用图像
这是一个由Webpack和url-loader提供支持的示例:
background: url('../images/heroBanner.png') no-repeat center center fixed;
因为文件足够大,webpack就像其他bundle一样将文件转换为输出目录。 它将在加载网页时发送此图像的HTTP请求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.