网页包5图像未加载'reactjs'`
这是我的webpack.config:网页包5图像未加载'reactjs'`,reactjs,webpack,Reactjs,Webpack,这是我的webpack.config: const HtmlPlugin = require("html-webpack-plugin"); const path = require("path"); module.exports = { watch: true, output:{ path:path.resolve(__dirname, "build"), filename:"
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"));
从“React”导入React;
从“react dom”导入react dom;
从“/images/flower.jpg”导入Img;
常量应用=()=>{
返回(
你好,世界!!
)
};
ReactDOM.render(
并且得到一些敌对的信息,比如:
“网页包性能建议:您可以使用import()或require来限制捆绑包的大小。请确保延迟加载应用程序的某些部分。有关详细信息,请访问https://webpack.js.org/guides/code-splitting/“
如何解决这个问题?我使用“webpack”:“^5.11.0”,“webpack cli”:“^4.2.0”,“
提前感谢。我不确定您是否复制了错误的代码,但它是不正确的。您将“{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>
)
};
从“/images/flower.jpg”导入Img;
常量应用=()=>{
返回(
你好,世界!!
{
返回(
你好,世界!!