时间戳

首页 > 解决方案 > React无法在任何组件中导入图像

javascript - React无法在任何组件中导入图像

问题描述

从我的 webpack.config 开始：

{
   test: /\.(jpg|png)$/,
   use:{
          loader: "file-loader",
          options: {},
   },
},

在我的任何组件中：

import img from'../images/test.png';

我不知道为什么会这样。我已经多次使用这个加载器，但我从来没有遇到过这个问题。包含.png图像的那一刻，我收到以下错误消息：

_react-setup/dist/app/images/test.png:1 (function (exports, require, module, __filename, __dirname) { �PNG ^

SyntaxError：无效或意外的令牌

我没有做任何疯狂的事情。只是一个小型节点服务器，react、react dom 和 styled-components。

有谁知道会发生什么以及如何解决它？我还尝试将图像放在不同的目录中，但没有任何帮助。

提前致谢

完整的 webpack.config

const path = require('path');

module.exports = {
  entry: './src/client/index.jsx',
  output: {
    filename: 'dist/public/bundle.js',
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
  },

  module: {
    rules: [
      {
        test: /\.jsx$/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        exclude: [
          path.resolve(__dirname, 'node_modules')
        ],
        loader: "babel-loader",
        options: {
          presets: ["es2015", "react", "stage-2"],
        }
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      },
    ]
  },
}

标签： javascriptnode.jsimagereactjs

解决方案

推荐阅读