网页包。图片加载失败
Webpack. Image loading failed
第一次使用webpack。无法在其中加载图像。尝试了很多东西来修复它,但是......
我通过 img src 将我的图像包含在 html 中。
我也在 index.js:
中导入
import backGround from '../img/bg.jpg';
const bgImg = document.getElementById('bg');
bgImg.src = backGround;
所以我得到了这样的错误:
./src/img/bg.jpg 中的错误 1:0
模块解析失败:意外字符“�”(1:0)
您可能需要一个合适的加载器来处理这种文件类型
我也可以给你看我的配置:
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
],
},
哟兄弟,你需要使用url-loader
文件加载器用于 html 个文件和
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
name: 'static/media/[name].[hash:8].[ext]',
},
},
…..
// More loaders
…..
{
loader: require.resolve("file-loader"),
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
name: "static/media/[name].[hash:8].[ext]",
},
},
确保将文件加载器放在最后
第一次使用webpack。无法在其中加载图像。尝试了很多东西来修复它,但是...... 我通过 img src 将我的图像包含在 html 中。 我也在 index.js:
中导入 import backGround from '../img/bg.jpg';
const bgImg = document.getElementById('bg');
bgImg.src = backGround;
所以我得到了这样的错误: ./src/img/bg.jpg 中的错误 1:0 模块解析失败:意外字符“�”(1:0) 您可能需要一个合适的加载器来处理这种文件类型
我也可以给你看我的配置:
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
],
},
哟兄弟,你需要使用url-loader 文件加载器用于 html 个文件和
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
name: 'static/media/[name].[hash:8].[ext]',
},
},
…..
// More loaders
…..
{
loader: require.resolve("file-loader"),
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
name: "static/media/[name].[hash:8].[ext]",
},
},
确保将文件加载器放在最后