在Angular应用程序中将application/octet-stream数据显示在img标签中

Question

3

从API中，我得到了一个application/octet-stream响应的数据。这个数据是一个图片文件。我想在我的angular组件html中展示这张图片。

我尝试使用HttpClient获取数据并将其转换为data url，然后使用FileReader将数据转换为data url，但是img标签没有显示出图片。

如何在img标签中显示图片？答案：最初的回答

- Binu Vijayan

你尝试过这种方法 <img [src]="data.imageurl"> 吗？在Angular中，可以查看这个文档。 - Jessica Rodriguez

我没有图片的URL，但我有图片数据作为二进制大对象（Blob）。 - Binu Vijayan

内容安全策略阻止了数据URL，我在img-url策略中添加了"data:"，然后它开始正常工作。 - Binu Vijayan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adriano Rabello · Answer 1

我用Angular解决了这个问题：

// 在HTML文件中创建img元素

// 在ts文件中创建URL以显示blob响应

// 记住，blob是来自API或其他地方的响应

const imageUrl = URL.createObjectURL(blob);

// 从HTML文件中获取元素

const element = document.getElementById("image");

// 在元素中设置URL

element?.setAttribute("src",imageUrl);