在 HTML 文件中添加 JSON 作为图片答案

【问题标题】：Adding JSON as a picture in HTML file在 HTML 文件中添加 JSON 作为图片
【发布时间】：2021-05-27 21:40:42
【问题描述】：

我要在HTML文件中添加一个json文件，也就是gif，作为图片，这样才能显示在页面上。

我试过了：

    <img src="myFile.json"/>

但它似乎不起作用。我在网上看了看，特别是看看有没有 Lottie json 插入教程，但没什么帮助。我也尝试将json转换为gif，但是文件太大所以不是一个好主意。

任何帮助将不胜感激:)

【问题讨论】：

JSON 是一种文本格式。你期望会发生什么？你想制作实际文本的图像吗？你也可以分享一个 JSON 的例子吗？也许也是您希望看到的图像？
您能否分享该 JSON 文件 (myFile.json) 的内容，因为它可能有助于我们了解需要什么。浏览器将无法将 JSON 直接加载到图像元素中，因为它没有图像 MIME 类型，但可能您希望先提取 JSON 中的数据，然后显示它。
您可以使用 canvas 和 fillText 方法绘制它。 w3schools.com/graphics/canvas_text.asp

标签： javascript html json gif animated-gif

【解决方案1】：

您可以在 html 正文中使用脚本标记来显示 gif。但是，您首先需要修改 json 文件，以便可以将其读取为 javascript。

像在 javascript 中一样将 json 数据分配给变量：

const gifData = {"a":"123","b":"456"}

然后在html的body中写下script标签如下，将src值替换为你的本地路径：

<script type="text/javascript" src="./data.json"></script>

【讨论】：

【解决方案2】：

你正在尝试的东西是不可能的。 Lottie 文件不能使用<img> 标签直接显示。

他们有一个特定的嵌入式网络播放器，您应该在显示这些动画时使用它。

在sn-p中可以看到使用嵌入式播放器播放的json动画。

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets9.lottiefiles.com/datafiles/MUp3wlMDGtoK5FK/data.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop controls autoplay></lottie-player>

【讨论】：