代码之家 › 专栏 › 技术社区 › Omar Jandali

徽标图像无法在React应用程序中呈现。模块分析失败

react-native reactjs javascript

Omar Jandali · 技术社区 · 6 年前

我有一个直肠组件。我正在尝试渲染组件中的图像。当我试图加载并将我的徽标呈现到组件中时,我遇到了一个问题。我将得到一个分析失败,我不确定为什么会得到这个错误:

Uncaught Error: Module parse failed: Unexpected character 'ï¿½' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
    at eval (splittlogo_logo_transparent.png:1)
    at Object../client/dist/splittlogo_logo_transparent.png (bundle.js:96)
    at __webpack_require__ (bundle.js:20)
    at eval (topbar.jsx:13)
    at Object../client/src/components/topbar/topbar.jsx (bundle.js:120)
    at __webpack_require__ (bundle.js:20)
    at eval (App.jsx:13)
    at Object../client/src/components/App.jsx (bundle.js:108)
    at __webpack_require__ (bundle.js:20)
    at eval (index.jsx:9)

这是我的代码:

import React, { Component } from 'react';
import Logo from '../../../dist/splittlogo_logo_transparent.png'

export default class TopBar extends Component{
    constructor(props){
        super(props),
        this.state = {
          product:"",
        }
      }

    userSearch(e){
        console.log(e.target.value)
    }

    render(){
        return(
            <div className="topbar-coutainer">
                <div className="logo-container">
                    <img src={Logo} alt=""/>
                </div>
                <div>
                    <input onChange={(e) => {this.userSearch(e)}} type="text" name="search" />
                </div>
            </div>
        )
    }
}

标识路径正确

这是我的网络包:

const path = require("path");
const webpack = require('webpack')
require("fs")

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./client/src/"),
  output: {
    path: path.resolve(__dirname, "./client/dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        loader: "babel-loader",
        test: /\.js[x]?/,
        exclude: /node_modules/,
        options: {
          presets: ["react", "env"]
        }
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            options: {
              modules: true,
              localIdentName: '[hash:base64]'
            }
          }
        ]
      }
    ], 
  },
  node: {
    fs: 'empty'
  },

  resolve: {
    extensions: [".js", ".jsx"]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.HOSTNAME': JSON.stringify("localhost"),
      'process.env.PORT': JSON.stringify(1111),
    })
  ]
};

现在,我的Webpack应该可以正常工作了,因为我在不同的项目中使用了相同的Webpack配置,并且它可以在我需要的地方正确地显示图像。

1 回复 | 直到 6 年前

Duncan Thacker 6 年前

问题是您的webpack配置没有设置为加载图像,所以当它试图解析.png时,它会死。您应该为配置规则 file-loader :

 {
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'file-loader',
        options: {},
      },
    ],
  }

…或类似的。

现在,我的Webpack应该可以正常工作了,因为我在不同的项目中使用了相同的Webpack配置,并且它可以在我需要的地方正确地显示图像。

不知道如何回答这个问题,只是说它似乎不可能,因为这个Webpack配置根本无法处理图像。