Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/webpack/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
网页包5图像未加载'reactjs'`_Reactjs_Webpack - Fatal编程技术网

网页包5图像未加载'reactjs'`

网页包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:"

这是我的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"));
从“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;
常量应用=()=>{
返回(
你好,世界!!
{
返回(
你好,世界!!