时间戳

首页 > 解决方案 > 无法使用 react 和 webpack 渲染 img

reactjs - 无法使用 react 和 webpack 渲染 img

问题描述

大家好，我是 Webpack 的新手，所以在尝试添加 img 标签的 src 时遇到了一些问题，因为我遇到了一个错误，我已经尝试了一些我在其他类似问题中看到的解决方案，例如添加 url- loader，但我仍然无法让它工作

我的代码中出现此错误

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 Scraper',
    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 scrape 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;

我的文件组织

我的文件组织

标签： reactjswebpack

解决方案

最有可能的是，这个错误来自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看起来不错（虽然我不是这类事情的专家）。

添加：这是另一个高度相关的问题，可能会对您有所帮助

推荐阅读