Question

[webpack.config.js]

test: /\.(png|jpg|jpeg|gif)$/,
use: [
    {
        loader: 'file-loader',
        options: {
            name: 'img/[name].[hash:10].[ext]',
        }
    }
]

[在前端代码（MainPage.jsx）中]

let imgURL = require('../../../assets/mars.png')    
console.log(imgURL)
<CardMedia
    className={classes.media}
    image={imgURL}
    title="Contemplative Reptile"
/>
// <CardMedia> is material-ui component

log：

img/mars.ed66029dc3.png
Failed to load resource: net::ERR_FILE_NOT_FOUND   mars.ed66029dc3.png

鼠标悬停消息mars.ed66029dc3.png：
D：/projectname/build/html/img/mars.ed66029dc3.png
我需要的输出是D：/projectname/build/img/mars.ed66029dc3.png

[项目结构]

build
  - html
    index.html (electron entrance)
  - img
    mars.ed66029dc3.png (file-loader copy)
  bundle.js (webpack output file, call by index.html)
src
  - assets
    mars.png
  - core
  - render
    - html
      index.html
    - js
      - components
        MainPage.jsx

如何解决？使用publicPath也不行，
而且我不知道如何统一所有路径，
在html中-我使用电子协议
在jsx中-导入并要求我使用webpack别名
在jsx img中-我使用文件加载器....

请帮助，谢谢

webpack 4-文件加载器不起作用

0 个答案: