使用 webpack 2 未在反应项目中加载图像答案

【问题标题】：images not loading in a react project using webpack 2使用 webpack 2 未在反应项目中加载图像
【发布时间】：2017-08-02 10:07:04
【问题描述】：

我正在尝试渲染这样的图像，但它们在页面上显示为损坏的图像。

...
return (
  <img src='/public/images/ic-account-circle-black-24-px-5.png' alt='uimg' />
)

这是我用于处理图像文件的 webpack 配置：

config.module.rules.push({
  test    : /\.(png|jpg|gif)$/,
  loader  : 'url-loader',
  options : {
    limit : 8192,
  },
})

【问题讨论】：

Not able to display in reactjs getting an error as not found的可能重复

标签： reactjs webpack

【解决方案1】：

我认为 webpack 默认不会检测 JSX 中的图像 src。您需要通过 require 明确说明它

https://github.com/petehunt/webpack-howto/issues/11

【讨论】：

【解决方案2】：

您需要 webpack 使用 url-loader 解析该图像

Example

var AccountCircle = require('src/images/ic-account-circle-black-24-px-5.png');

class Component extends React.Component {
   render() {
     return (
       <img src={AccountCircle} />
     )
   }
}

Webpack 将使用 url-loader 解析 require，将其移动到您的目标文件夹并自动插入 url。

【讨论】：