Question

我正在尝试从图像文件夹中将png图像加载到我的组件中。但是，我一直收到这个错误：

BROWSERIFY ERROR:

../../../src/js/images/001.png:1
�PNG
^
ParseError: Unexpected character '�'

我不确定'：1'来自文件名之后的位置。也不是' '。

如果重要的话，这是我正在使用的反应启动器：

https://github.com/joellongie/superCell

我这样导入：

import path from "../../images/001.png";

并像这样使用它：

<img src={path} style={imgStyle} />

非常感谢任何帮助，谢谢！

Answer 1

不确定要实现的目标，但是可以将PNG加载到变量中：

var fs = require('fs');
var img = fs.readFileSync(__dirname + '/../../images/001.png');

然后您可以base64对其进行编码并内联显示。

// Create new image element
var el = document.createElement('img');

// Encode PNG data as elements src, add headers
el.src = "data:image/png;base64, " + img.toString('base64');

// Append image to some element
document.getElementById("myContainer").appendChild(el);

Answer 2

图片文件不是javascript模块，您不能import它。你想要一个简单的

const path = "../../images/001.png";

其中path是一个字符串。

ParseError：导入图像时出现意外字符' '

2 个答案: