使用webpack文件加载器加载图像时出现问题

Question

我目前正在使用React和webpack进行一个项目，但我对这两个项目都不熟悉。我需要显示服务器文件系统中的图像。我正试图使用webpack的文件加载程序来显示图像，但我很难让它正常工作。

编辑：由于一些建议，我做了一些更改，我遇到的问题与最初的问题略有不同。从需要图像切换到导入图像后，我现在获得了正确的文件路径，"images/7047aa4de98575625fc771ca68618c28.png"；。现在，我的webpack文件加载程序输出到该目录，并且我的文件系统上确实有一个名为images/7047aa4de98575625fc771ca68618c28.png的映像，但当我尝试显示该映像时，会收到404 NOT FOUND响应。

我的webpack配置在这里：

var path = require('path');
module.exports = {
entry: './src/main/js/app.js',
devtool: 'sourcemaps',
cache: true,
mode: 'development',
output: {
path: __dirname,
filename: './src/main/resources/static/built/bundle.js'
},
module: {
rules: [
{
test: /.(jpg|png|svg)$/i,
loader: 'file-loader',
options: {
outputPath: 'images',
}
},
{
test: /.jsx?$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}]
}
]
}
};

我试图获得图像的代码的相关部分在这里：

// const catImage = require('./data/images/cat.png');
import catImage from './data/images/cat.png';
const root = '/api';
class App extends React.Component {
render() {
return (
<BrowserRouter>
<div>
<Switch>
<Route path="/" component={Upload} exact />
<Route path="/share/:key" component={Share} />
<Route path="/test" component={Test} />
<Route component={Error}/>
</Switch>
</div>
</BrowserRouter>
)
}
}
class Test extends React.Component {
render() {
const gat = catImage;
return (
<div>
<img src={gat} />
</div>
)
}
}

Answer 1

切换到url加载程序而不是文件加载程序使其工作。我不知道为什么文件加载程序不起作用。哦，好吧。

var path = require('path');
module.exports = {
entry: './src/main/js/app.js',
devtool: 'sourcemaps',
cache: true,
mode: 'development',
output: {
path: __dirname,
filename: './src/main/resources/static/built/bundle.js'
},
module: {
rules: [
{
test: /.(jpg|png|svg)$/i,
loader: 'url-loader',
options: {
outputPath: 'images',
}
},
{
test: /.jsx?$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}]
}
]
}
};

确保您使用任一

import image from './path/to/image.png';

或

const image = require('./path/to/image.png');
const imageSrc = image.default;

你也可以做：

const imagePath = require.context('./path/to/imageDirectory', true);
const imageSrc = imagePath('./image.png', true);