如何在React中加载本地图像

问题描述 投票:0回答:2

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

我正在尝试将本地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-loaderwebpack结合使用,并且我的配置看起来像这样:

  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,

    }]

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

reactjs image webpack src webpack-file-loader
2个回答
1
投票

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

所以正常工作。

我的目录结构如下:

enter image description here

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


0
投票

我不确定这是否是最好的方法,但是在我的应用程序中,我为此使用了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'}/>

© www.soinside.com 2019 - 2024. All rights reserved.