Why can chrome open a picture of disk D while html's img cannot be accessed?

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

can be opened directly using chrome browser,

but when I use

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

img tag, the browser prompts

Not allowed to load local resource:

how do I access win10 native pictures as if I were visiting pictures on the cloud? There are so many pictures that you can"t put them in the project


  • conclusion

to use the http/https protocol.

  • reason

file opens a local file, not a cloud picture

  • solve

use web server service pictures such as nginx/httpd/iis

such as nginx

listen 443
server_name img.a.com
root 

uses relative paths.


can simply be understood that the browser (renderer) is a separate sandbox that can only read the contents of the box. The
html page runs in this box, and only the browser program itself can read the files in the system for security reasons.
img.src loading images cannot directly use the file protocol, but need to be converted through a container: web container (jboss,tomcat,iis.) or ftp container


use a relative path to find another disk from one disk. Or use the http container to put the image resources in the container

Menu