我在webpack配置中安装了“File-loader”和“Url-loader”。
然而,我不确定如何将图像链接到我的组件。我将图像的'src'保存在'Data.js'文件中,从那里我将图像数据传递给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
}
...
在我的React展示组件中,我只是使用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"
}
...
然而,这并不能解决问题。非常感谢您的指导。