我正在嘗試在我的應用程式的主頁上加載 jpg 檔案：
import cad from './CAD/untitled.106.jpg'
但以下錯誤不斷彈出：
assets by status 2 MiB [cached] 1 asset
cached modules 2.41 MiB (javascript) 937 bytes (rjavascript modules 420 KiB
./src/components/HomePage.js 1.18 KiB [built]
./src/components/CAD/untitled.106.jpg 419 KiB [
(1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./src/components/HomePage.js 7:0-41
@ ./src/components/App.js 3:0-34 12:90-98
@ ./src/index.js 1:0-35
webpack 5.70.0 compiled with 1 error in 84 ms
我嘗試通過添加帶有“檔案加載器”的規則來修改 webpack.config.js。但是，問題仍然存在。目前，我正在使用“webpack”：“^5.70.0”。這是我的 webpack.config.js：
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./static/frontend"),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.(jpeg|png|jpg|svg|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
}
}
],
},
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("development"),
},
}),
],
};
我嘗試了許多不同的方法和解決方案，但我不知道為什么我的 webpack.config.js 無法處理 jpg 檔案。有人可以告訴我這個問題的根本原因嗎？非常感謝。
uj5u.com熱心網友回復：
在 webpack 5 中，您可以將其加載為asset/resource
資產/資源發出一個單獨的檔案并匯出 URL。以前可以通過使用檔案加載器來實作。
所以它應該是這樣的：
{
test: /\.(?:ico|gif|png|jpg|jpeg|svg)$/i,
type: 'asset/resource',
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/454073.html
標籤：javascript 反应 网络 网页包 材料-ui