我正在使用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",
...
全球目录图像的 Value :
我想知道我在哪里犯错误以及如何解决这个问题?
EDIT : 阅读后,我认为webpack需要参考图像的相对位置,所以我将webpack.config.js修改为以下内容:
...
output : {
path : PATHS.build,
publicPath : "/",
filename : "bundle.js"
}
...
但是,这并没有解决问题 . 指导将非常感激 .
2 回答
建议:
1.Use url-loader for images.
通过在webpack配置中指定
limit
,例如:url-loader?limit=8000
,如果文件小于8000字节 .url-loader
作品似乎是file-loader
. 将文件嵌入主条目的包输出中 . 如果没有,请参见第2点 .2.Use url(address) in css/scss for use images
这是一个由Webpack和url-loader提供支持的示例:
background: url('../images/heroBanner.png') no-repeat center center fixed;
因为文件足够大,webpack就像其他bundle一样将文件转换为输出目录 . 它将在加载网页时发送此图像的HTTP请求 .
https://github.com/EcutDavid/EcutDavid.github.io/blob/8346f18dccdae18c4d6e98eb9b8cc51d62338cb5/src/styles/Header.scss#L2
webpack现在不支持异步资源,这意味着如果你想要图像,你应该只向它发送图像路径 . 就像这样:
图像的url不能是变量,因为当webpack捆绑你的代码时,它不会运行你的代码,所以它不能知道变量的值 .
如果你真的想要异步要求 . 你可以尝试使用require.ensure