HTML 无法正确读取图像标签 src 中的 unicode

Question

我在 html、css 和 js 中使用 electron。对于我的桌面应用程序，我想使用 img 标签从我的本地存储导入图像。但是，我的文件名包含一个 unicode（例如 #）。当 HTML 尝试获取图像时，请从下面的示例 unicode.See 开始删除文件名的后半部分。

<img src= "path/to/my/example#file.png">

这就变成了，src= "path/to/my/example"

删除Unicode后面的部分。在控制台返回我 ERR_FILE_NOT_FOUND。

使用 %23 可能是一种选择，但是，不幸的是，文件名是不可预测的，它会根据文件而变化（我导入了几张图片）。因此，使用 javascript 自动获取文件名和创建 HTML 标签。有没有办法让 javascirpt 自动捕获字符串（文件路径）中的 unicode 并强制执行它以便 html 可以读取它？

Answer 1

您需要 'url encode' 也称为 'percent encode' 所有特殊字符。在您的示例中，将 # 替换为 %23。

您还在属性中错误地使用了 : 而不是 =：

<img src="path/to/my/example#file.png">

Answer 2

# 不是您所说的“unicode”。它只是一个普通的 ASCII 字符。但是，在 url 中，它恰好是一个 reserved 字符，用于表示资源中的锚点，因此不是资源路径的一部分，它是为什么你看到它被剥掉了。

因此，如果要在路径本身内部使用，则必须 url-encode（即 percent-encode）# 字符作为 %23，例如：

<img src="path/to/my/example%23file.png">

既然您说您需要通过 JavaScript 生成此 HTML，您将需要让脚本解析文件路径并根据需要对任何保留字符进行编码。事实上，JavaScript 有 built-in 个功能正是为了这个目的：encodeURI() 和 encodeURIComponent().

HTML 无法正确读取图像标签 src 中的 unicode

HTML can't properly read unicode in image tag src

javascript

html

unicode

filenames