为什么chrome可以打开D盘的图片，而html的img却无法访问？

Question

file:///D:/workspace/vueApp/qingchi/static/img/1.jpg

可以使用chrome浏览器直接打开，

但当我使用

<img src="file:///D:/workspace/vueApp/qingchi/static/img/1.jpg" alt="">

img标签时，浏览器却提示

Not allowed to load local resource:

如何像访问云端图片一样访问win10本机的图片呢？图片很多，不能放在项目里面

Answer 1

• 结论

要使用http/https协议。

• 原因

file打开的是本地的文件，不是云端的图片

• 解决

使用nginx/httpd/iis等web服务器服务图片

比如nginx

listen 443
server_name img.a.com
root 指向图片文件目录

Answer 2

使用相对路径。。。

Answer 3

可以简单理解成浏览器（渲染器）是一个独立的沙箱，只能读取箱子中的东西。
html页面是运行在这个箱子中的，只有浏览器程序本身才能读取系统中的文件，这是为了安全考虑。
img.src加载图片不能直接使用文件协议，需要通过容器来转换：web容器（jboss，tomcat，iis...）或ftp容器都是可以的

Answer 4

使用相对路径，从一个盘找到另外一个盘。或者使用http容器，把图片资源放到容器中