如果它位于单独的文件中，如何在 HTML 中显示 base64 编码的图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3917290/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display base64 encoded image in HTML if it is located in a separated file?
提问by serg
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，但没有帮助。有任何想法吗？
回答by Stan Rogers
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-8or similar clause between the content-type and the encoding:
您需要将正确的 Content-type、Content-encoding 和 charset HTTP 标头与文件一起发送。请注意，它们都是 data: URI 模式的一部分。你真的应该charset=utf-8在内容类型和编码之间有一个或类似的条款：
url(data:image/png;charset=utf-8;base64,...);
回答by Hazard
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 文档链接到页面并在画布元素中显示图像。我这样做是为了在图像中搜索一个变量，然后用 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;
回答by Coldark
You can simply take on server side approach and just print the file into the srcpart of the imgtag like so:
您可以简单地采用服务器端方法，并将文件打印到标签的src一部分，img如下所示：
<img src="<?php echo file_get_contents('some/path/image.txt');?>"
Where your image.txtcontains i.e.:
data:image/png;base64,...
你image.txt包含的地方，即：
data:image/png;base64,...
回答by leonbloy
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 工作来实现。
