Javascript ParseError:意外字符'࿽'；导入图像时

我正在尝试从images文件夹将png图像加载到我的组件中。然而，我不断地发现这个错误：

BROWSERIFY ERROR:

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

我不确定文件名后面的“：1”来自何处。也不是�'.

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

我是这样导入的：

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

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

然后像这样使用它：

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

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

---

任何帮助都将不胜感激，谢谢

图像文件不是javascript模块，您无法导入它。你想要一个简单的

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

---

其中，

path

是一个字符串。

不确定要实现什么，但可以将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);

---

Browserify是否支持网页加载程序？如果没有，这将不起作用。很可能是使用webpack url loader模块，它将像模块一样处理图像。看起来不像，我不认为url loader会像脚本模块一样处理图像内容-因为这是当前发生的情况。不，但在一个使用节点进行服务器端渲染的等轴测应用程序中，url加载程序模块将不可用，节点将尝试像脚本一样对其进行处理，从而呈现出确切的错误。