时间戳

首页 > 解决方案 > 使用 ReactJS 添加静态图像

reactjs - 使用 ReactJS 添加静态图像

问题描述

我在 StackOverflow 上读了很多东西，但在我的情况下它仍然不起作用。也许你能帮我解决这个问题吗？

在我的包裹中：

"file-loader": "^1.1.11",
"url-loader": "^1.1.1",

我的网络包：

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015', 'stage-1']
        }
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'file?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    }
  },

};

我的代码：

import React, { Component } from 'react';
import ImgExplore from './icon-explore.png';

export default class Landing extends Component {
  render() {
    return(
      <div>

        <img src={ImgExplore} className="img-fluid" />

      </div>
    );
  }
}

我收到这条消息

./src/components/icon-explore.png 中的错误模块构建失败：SyntaxError: Unexpected character '�' (1:0)

1 | �PNG | ^ 2 | 3 | 4 | IHDR��W�gAMA�a�IDATx�] �Tյ=����U

标签： reactjsimagewebpack

解决方案

推荐阅读