Question

我一直试图将图片加载到一个简单的标签上，但它根本不起作用。我希望使用ES6语法，而不是在这种情况下动态注入图像：

import React from 'react'
import BackgroundImage from './Sparrow_icon.png';


const Icon = ({icon}) => {

    return (
        <img src={require('./Sparrow_icon.png')} alt=""/>
    )
};

export default Icon;

导致：

<img src="data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJlNTZlYThiOTQ5OWUzZmM2NTkyY2ZhMjgxNjg1YTBkMy5wbmciOw==" />

显示..什么都没有。此外，当我用base64转换器转换它时 - 图像不存在。

我正在使用webpack2和file-loader以及url-loader。

Answer 1

似乎问题是这个文件正由文件加载器和url-loader处理。

$ echo 'bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJlNTZlYThiOTQ5OWUzZmM2NTkyY2ZhMjgxNjg1YTBkMy5wbmciOw==' | base64 -d
module.exports = __webpack_public_path__ + "e56ea8b9499e3fc6592cfa281685a0d3.png";

将您的webpack配置更改为仅使用png文件中的一个。

Answer 2

替换

<img src={require('./Sparrow_icon.png')} alt=""/>

与

<img src={BackgroundImage} alt=""/>

这有用吗？

在React.js中使用img标签显示图像

2 个答案: