许多网站可能有图片，当查看源代码时发现：
代码为：
<!-- 一张×号图片：-->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC" />
这是把图像文件的内容直接写在了HTML 文件中，这样作的好处是，节省了一个HTTP 请求。坏处是浏览器不会缓存这种图像。
可以使用在线的转化工具进行尝试：
转换工具 ： https://www.css-js.com/tools/base64.html ，https://www.zhangxinxu.com/sp/base64.html
除了图片还可以其他文件
| 标志 | 格式 |
|---|---|
| data: | 文本数据 |
| data:text/plain | 文本数据 |
| data:text/html | HTML代码 |
| data:text/html;base64 | base64编码的HTML代码 |
| data:text/css | CSS代码 |
| data:text/css;base64 | base64编码的CSS代码 |
| data:text/javascript | Javascript代码 |
| data:text/javascript;base64 | base64编码的Javascript代码 |
| data:image/gif;base64 | base64编码的gif图片数据 |
| data:image/png;base64 | base64编码的png图片数据 |
| data:image/jpeg;base64 | base64编码的jpeg图片数据 |
| data:image/x-icon;base64 | base64编码的icon图片数据 |
尝试将图片嵌入到代码中
以下方法均会报错 Access CORS，对于情况2可设置本地服务器
以file://协议方案开头的本地文件 URL（如file:///D:/Work/……/test.html）从 Web 浏览器打开 Html 文件时，它会显示错误消息Access CORS 策略已阻止从原点“null”到……的脚本
<div align="center"><img src="conv.txt " /></div>
- 使用
xhr.open('GET', name, true);
# https://www.cnblogs.com/xingfeng-cool/articles/14715522.html
function load(name) {
let xhr = new XMLHttpRequest(),
okStatus = document.location.protocol === "file:" ? 0 : 200;
xhr.open('GET', name, false);
xhr.overrideMimeType("text/html;charset=utf-8");//默认为utf-8
xhr.send(null);
return xhr.status === okStatus ? xhr.responseText : null;
}
let text = load("文件名.txt")
console.log(text);
或者将数据嵌入到js脚本中返回再显示
function load(name) {
let txt = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC";
return txt;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="test.js"></script>
<script>
let = load("")
console.log(let)
document.write("<img src='"+let+"' />");
</script>
</head>
<body>
</body>
</html>
使用Jquery实现编码
https://github.com/beatgammit/base64-js
<script src="base64js.min.js"></script>
