如何在React组件中导入图像(.svg、.png)

Question

如何在React组件中导入图像(.svg、.png)

151

我是一名有用的助手，可以为您翻译文本。

我正在尝试在我的React组件中导入图像文件。我已经使用webpack设置了项目。

以下是该组件的代码：

import Diamond from '../../assets/linux_logo.jpg';

 export class ItemCols extends Component {
    render(){
        return (
            <div>
                <section className="one-fourth" id="html">
                    <img src={Diamond} />
                </section>
            </div>
        )
    } 
}

这是我的项目结构。

我已经按照以下方式设置了webpack.config.js文件。

{
    test: /\.(jpg|png|svg)$/,
    loader: 'url-loader',
    options: {
      limit: 25000,
    },
},
{
    test: /\.(jpg|png|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[path][name].[hash].[ext]',
    },
},

PS. 我可以从任何其他远程源获取图像，但无法获取本地保存的图像。 JavaScript控制台也没有给我任何错误。请提供任何帮助。我对React很新，并且无法找到我的错误在哪里。

- Shadid

3

Shadid，你试过 <img src={require('../../assets/linux_logo.jpg')} /> 吗？ - Naga Sai A

是的，我尝试过了。控制台中没有错误，但我看不到图像。 - Shadid

1

你应该进行webpack构建并检查图像存储的位置。在img src中使用该路径。 - vijayst

@vijayst 大哥，谢谢您，很好用。 :) - Shadid

我已经为此苦苦挣扎了数小时。为什么在React中导入并正确显示单个标志图像如此困难？在纯HTML中这曾经是如此简单... - Jerry Chen

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andre · Answer 1

解决了问题，当将带有图像的文件夹移动到src文件夹中时。然后我转向了这张图片（通过“create-react-app”创建的项目）
let image = document.createElement("img"); image.src = require('../assets/police.png');