ParseError：导入图像时出现意外字符“�”答案

【问题标题】：ParseError: Unexpected character '�' when importing imageParseError：导入图像时出现意外字符“�”
【发布时间】：2019-10-31 21:22:08
【问题描述】：

我正在尝试将 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} />

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

【问题讨论】：

Browserify 是否支持类似 Webpack 的加载器？如果没有，这将不起作用。

标签： javascript reactjs

【解决方案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);

【讨论】：

【解决方案2】：

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

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

path 是一个字符串。

【讨论】：

很可能使用 webpack url-loader 模块，它可以像模块一样处理图像。
看起来不像，我认为 url-loader 不会像脚本模块那样处理图像内容——因为这就是当前发生的情况。
不，但是在使用 node 进行服务器端渲染的等距应用程序中，url-loader 模块将不可用，node 会尝试像脚本一样处理它，呈现确切的错误。