如何在React中加载本地图像

Question

我已经花了好几个小时来寻找，找不到有效的解决方案。

我正在尝试将本地uri添加到and img元素，但是它无法解决。

import React from 'react'
import image from '../assets/udemy2.PNG'
const WorkingSpinner = () => (
<div>
  <img height="50px" width="50px" src={image}/>
</div>
)

export default WorkingSpinner

我正在尝试将file-loader与webpack结合使用，并且我的配置看起来像这样：

  module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    }, {
    loader: 'file-loader',
    test: /\.(png|jpe?g|gif)$/i,
    options: {
      name: '[name].[ext]',
      outputPath: "images"
    }
    }, {
    loader: 'url-loader?limit=8192',
    test: /\.(png|jpe?g|gif)$/i,

    }]

我只是不知道为什么它不起作用，根据我看到的文档和不同的教程，我正在根据解决方案进行操作。但是，当我尝试渲染组件时，我得到的只是一个空图像。

Answer 1

好，所以看来解决方案比添加加载程序和插件更简单。事实证明，我可以简单地将图像放在输出捆绑的公共目录中的文件夹中，并使用要使用的图像的绝对路径。

所以正常工作。

我的目录结构如下：

希望这可以帮助其他有类似问题的人。

Answer 2

我不确定这是否是最好的方法，但是在我的应用程序中，我为此使用了copy-webpack-plugin（https://github.com/webpack-contrib/copy-webpack-plugin：]]

 plugins: [
    ... someOtherPlugins,
    new CopyWebpackPlugin([{from: 'images/*.*'}])
]
然后从React组件调用

<img height="50px" width="50px" src={'/images/image.jpeg'}/>