如果它位于一个单独的文件中，如何在HTML中显示base64编码的图像？

I have base64 encoded image. If I put it right into html it works:

我有base64编码的图像。如果我把它正确地放入html它的工作原理：

<img src="data:image/png;base64,..."/>

But when I put all that base64 content into a separated file, it doesn't:

但是，当我将所有base64内容放入一个单独的文件中时，它不会：

<img src="image.base64.txt"/>

I tried changing extension to .png, but it doesn't help. Any ideas?

我尝试将扩展名更改为.png，但它没有帮助。有任何想法吗？

4 个解决方案

#1

You would need to send the correct Content-type, Content-encoding and charset HTTP headers along with the file. Note that they are all part of the data: URI schema as well. You really should have a charset=utf-8 or similar clause between the content-type and the encoding:

您需要发送正确的Content-type，Content-encoding和charset HTTP标头以及该文件。请注意，它们都是数据的一部分：URI模式。你应该在内容类型和编码之间有一个charset = utf-8或类似的子句：

url(data:image/png;charset=utf-8;base64,...);

#2

You cannot do that, I believe. The first syntax corresponds to a pseudo protocol (scheme) data: that means that the data is not to be fetched from somewhere outside, but from the attribute string itself. As the "data" is in general binary, and the attribute is text, base64 is commonly used.

我相信你不能那样做。第一种语法对应于伪协议（方案）数据：这意味着不从外部某处获取数据，而是从属性字符串本身获取数据。由于“数据”通常是二进制的，并且属性是文本，因此通常使用base64。

But when the data is fetched from outside the page (http server, or local filesystem), the data must come in raw (binary) form.

但是当从页面外部（http服务器或本地文件系统）获取数据时，数据必须以原始（二进制）形式提供。

You could do it with some javascript work, of course.

当然，你可以通过一些javascript工作来完成它。

#3

I did something similar for my final year project at university, i was using XML doc's to link to a page and show the images in a canvas element. I made it so the image was searched for a variable, then assigned the variable with base 64 encoded image like so:

我在大学的最后一年项目中做了类似的事情，我使用XML文档链接到一个页面并在canvas元素中显示图像。我做了它，所以图像搜索变量，然后分配变量与base 64编码图像，如下所示：

xmlDoc=loadXMLDoc("test.xml");

x=xmlDoc.getElementsByTagName("image");
txt=x[1].childNodes[0].nodeValue;
document.write(txt);

var card1 = txt;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
    ctx.drawImage(img,0,0);
};
img.src= card1;

#4

You can simply take on server side approach and just print the file into the src part of the img tag like so:

您可以简单地采用服务器端方法，只需将文件打印到img标记的src部分，如下所示：

<img src="<?php echo file_get_contents('some/path/image.txt');?>"

Where your image.txt contains i.e.: data:image/png;base64,...

你的image.txt包含：data：image / png; base64，...

#1

url(data:image/png;charset=utf-8;base64,...);

#2