關于這個問題有幾個執行緒，但到目前為止，它們都沒有對我產生任何結果。正如標題所示，我的 React 專案包含一個 img 標簽，其中提供了一個 png 作為其源代碼。
到目前為止，我已經嘗試使用要求路徑并將其作為變數匯入。我還在我的 webpack 配置中添加了加載器，如下所示。
另外需要注意的是維度是實際加載的，右鍵查看圖片源時，網站回傳Cannot GET /[object Object]
非常感謝任何見解！
先感謝您！
圖片標簽
<img src={require('./mug1.png').default} className="mugImage" />
CSS
.mugImage {
object-fit: cover;
width: 100%;
height: 100%;
z-index: 10;
}
網頁包
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
mode: "development",
resolve: {
fallback: {
assert: require.resolve('assert'),
crypto: require.resolve('crypto-browserify'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser'),
stream: require.resolve('stream-browserify'),
},
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}, {
test: /\.(jpg|png|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 25000
}
}
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
esModule: false,
},
},
],
},
]
},
plugins: [htmlPlugin]
};
uj5u.com熱心網友回復：
您不需要同時使用這兩個加載器。加載程式url-loader和file-loader作業方式相同，但不同之處在于url-loader可以配置limit為像 DataURL 那樣行內的更小的檔案。喜歡
data:image/png;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiNDRlYTU1N2FlYmM4ZTM2Y2EyOGQ2N2RlM2YwMWM2MWMucG5nIjs=
另一件事是將file-loader資產發送到構建的輸出目錄。如果您選擇使用url-loader
module.exports = {
...
module: {
rules: [
...
{
test: /\.(jpe?g|png|svg)$/,
use: [{ {
loader: 'url-loader',
options: {
limit: 25000 //asset size limit in byte
name: '[name].[ext]',
outputPath: 'assets/images/'
},
}]
},
]
},
plugins: [...]
};
小于配置的資產大小將與 DataURL 行內，不會發出資產。更大的將作為單獨的檔案處理。
file-loader試一試_
module.exports = {
...
module: {
rules: [
...
{
test: /\.(jpe?g|png|svg)$/,
use: [{ {
loader: 'file-loader'
}]
},
]
},
plugins: [...]
};
這里保留 es 語法，不要通過esMoulde: false. 從您的代碼中洗掉。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/486911.html
標籤：javascript 反应 网页包
下一篇：即使使用最簡單的視圖，UIHostingControllerintrinsicContentSize在初始化時也不正確