如何使用 Javascript / Jquery 显示图像对象答案

【问题标题】：How to display image object using Javascript / Jquery如何使用 Javascript / Jquery 显示图像对象
【发布时间】：2017-01-18 12:13:03
【问题描述】：

我需要在页面上显示一个名为“输出”的对象。它是一个图像对象。我尝试使用以下代码，但它不起作用。非常感谢任何建议。

document.getElementById("imageDiv").appendChild(output);
<div id='imageDiv'></div>

当我提醒对象时，我得到以下信息：

{"result":{"output":"data://path-to-file/background-32.png"},"metadata":{"content_type":"json","duration":9.845787767000001}}

我如何实际显示文件？

【问题讨论】：

需要更多信息...
image object 到底是什么意思？
查看更新..

标签： javascript jquery html object

【解决方案1】：

您正在使用来自 Algorithmia 的 ColorfulImageColorization API。

事实证明，该服务实际上并未返回图像数据或生成图像的真实 URL 路径。相反，它会返回一个指针，指向图像在您使用它们设置的数据集合中的存储位置。您可以阅读各种类型的数据收集等on their Hosted Data page here

另外，来自他们的 cmets 部分：

Nir_Photomyne：嘿！ :) 如何使用 JS 访问输出？我得到了输出的网址，但是然后呢？帮助

deeplearning：@Nir_Photomyne：有几个选项取决于你想对图像做什么。最好的选择可能是将输出位置设置为 s3，在 https://algorithmia.com/data 设置 s3 数据连接器之后

.

我的个人意见？

我想看看是否能找到一个类似的 API，它更直接，只需在响应中发送图像数据而不是存储数据。

【讨论】：

它有 data:// 因为它是一个外部 api，我得到了这种格式的图像。我不认为我必须替换任何东西......这是 Algorithmia 的 api。
据我所知，前面的data:// 仅在源是base64 编码字符串或类似字符串时才有效，因为那是数据。如果您尝试输入 data://somepath/to/a/real/image.png 它将尝试将 url 作为数据而不是路径读取。 See this jsfiddle
无论如何，以上内容应该对您有用，对吧？如果您实际上有 base64 编码的图像而不是路径，只需删除 .replace()
是的，实际上它是一个图像，而不是一个路径。那么如何访问它 - var url=output.result.output ？
如果它们实际上是 base64 编码图像（非常长的编码字符串），则使用 .replace('data://','data:image/png;base64,');。我更新了上面的

【解决方案2】：

http://jsbin.com/diwekox/edit?html,js,output

你是不是忘了放图片源属性还是别的什么？

【讨论】：