無法使用react和webpack渲染img

大家好，我是 Webpack 的新手，所以我在嘗試添加 img 標簽的 src 時遇到了一些問題，因為我收到了錯誤，我已經嘗試了一些我在其他類似問題中看到的解決方案，例如添加 url-裝載機，但我仍然無法讓它作業

我在我的代碼中收到此錯誤

ERROR in ./client/src/img/logo.png 1:0
[0] Module parse failed: Unexpected character '?' (1:0)
[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
[0] (Source code omitted for this binary file)
[0]  @ ./client/src/pages/Homepage.js 108:9-35
[0]  @ ./client/src/App.js 3:0-40 9:38-46
[0]  @ ./client/src/index.js 3:0-24 4:50-53

我的 Webpack.config.js 代碼

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main: path.join(__dirname, 'client/src/index.js')
    },
output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
},
plugins: [new HtmlWebpackPlugin({
    title: 'Ig Scrapper',
    template: path.join(__dirname, 'client/templates/index.ejs'),
    filename: 'index.html'
})],
module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /(node_modules|express)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        "@babel/preset-env",
                        "@babel/preset-react"
                    ]
                },
            }
        },
        {
            test: /\.(html)$/,
            use: {
                loader: 'html-loader',
                options: {
                    attrs: [':data-src']
                }
            }
        },
        // {
        //     test: /\.(png|jpg)$/,
        //     include: path.join(__dirname, '/client/img'),
        //     loader: 'file-loader'
        // },
        {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
        },
        {
            test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.] )?$/,
            use: [
                {
                    loader: 'url-loader?limit=100000'
                }
            ]
        }
    ]
},
devServer: {},
resolve: {
    extensions: ["*", ".js", ".jsx"]
},
resolveLoader: {
    extensions: ["babel-loader"]
},
devtool: 'source-map',
mode: 'development',
resolve: {
    fallback: {
        fs: false
    }
}

};

我的 Homepage.js 代碼

import React, { useState } from "react";
import axios from "axios";
import '../assets/Homepage.css'
// import logo from '../img/instagramLogo.png'

const Homepage = () => {


return (
    <>
        <div className="container">
            <div className="homepage">
                <div className="homepage__igAssets">
                    <img src={require('../img/logo.png')} alt="" className="ig__logo" />
                    {/* <img src="./assets/instagram.png" alt="" className="ig__text" /> */}
                </div>
                <h1 className="homepage__title">?Let's scrappe your instagram account! </h1>
                <div className="homepage__elements">
                    <input className="homepage__input" placeholder="Username..." value= {username} onChange={onChange} />
                    <button className="homepage__button" onClick={onClick}>Get instagram followers!</button>
                </div>
                {renderData()}
            </div>
        </div>
    </>
);
};

export default Homepage;

我的檔案組織

uj5u.com熱心網友回復：

最有可能的，這個錯誤來自Homepage.js，就行了：

<img src={require('../img/logo.png')} ... />

Require 不是用于影像，而是用于 js 模塊（在此處了解更多資訊）。

勘誤：以上是關于 nodejs 中的 require，它可能不是要走的路，但 require 似乎與 webpack 一起作業正常。

在反應中使用影像的方法是：

// First, import the image file
import image from './path-to-image.png';

// Later, use it as source in the render
<img src={image} ... />

你webpack.config.js看起來不錯（雖然我不是這方面的專家）。

添加：這是另一個高度相關的問題，可能對您有所幫助

標籤：反应 网络包

上一篇：如何在M1AppleSiliconMac上成功安裝Snowflake的ODBC驅動程式？

下一篇：在WebPack中添加自定義Js并通過MVCHTMLhelper使用它