Изображение webpack 5 не загружается с помощью `reactjs`
вот мой webpack.config:
const HtmlPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
watch: true,
output:{
path:path.resolve(__dirname, "build"),
filename:"bundle.js"
},
module:{
rules:[
{
test:/\.(js|jsx)$/,
exclude:/node_modules/,
use:[{loader:"babel-loader"}]
},
{
test:/\.html$/,
use:[{loader:"html-loader"}]
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [{loader: 'file-loader'}],
}
]
},
plugins:[
new HtmlPlugin({
filename:"index.html",
template:"./src/index.html"
})
],
devtool: 'inline-source-map',
devServer:{
historyApiFallback:true,
port:5000
}
}
я импортирую изображение в index.js:
import React from "react";
import ReactDOM from "react-dom";
import Img from "./images/flower.jpg";
const App = () => {
return (
<div>
<h1>Hello World!!</h1>
<img src = "{Img}" />
</div>
)
};
ReactDOM.render(<App />, document.getElementById("root"));
Но когда я запускаю приложение, изображения не загружаются. это выглядит как:
и получить какое-то воинственное сообщение, например:
"webpack performance recommendations: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application. For more info visit https://webpack.js.org/guides/code-splitting/"
как это решить? Я использую "webpack": "^5.11.0", "webpack-cli": "^4.2.0",
Заранее спасибо.
Ответы 2
Я не уверен, что вы неправильно скопировали код, но это неправильно. Вы ставите "{Img}" в кавычки, но без: {Img}
Неправильный:
import Img from "./images/flower.jpg";
const App = () => {
return (
<div>
<h1>Hello World!!</h1>
<img src = "{Img}" /> <-- HERE IT IS NOT A VARIABLE
</div>
)
};
Правильный:
import Img from "./images/flower.jpg";
const App = () => {
return (
<div>
<h1>Hello World!!</h1>
<img src = {Img} /> <-- WITHOUT "" IT IS A VARIABLE
</div>
)
};
В документах Webpack 5 указано, что вы можете использовать встроенные модули активов, поэтому вам не нужно file-loader: https://webpack.js.org/guides/asset-management/#loading-images
В файле конфигурации вашего веб-пакета измените правило обработки изображений на:
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
В index.js замените <img src = "{Img}" /> на <img src = {Img} /> (как предложил Магофоко).