HTML中使用本地完整路径的图片无法显示，用URL正常该如何解决？

问题原因 #

浏览器默认启用了本地文件安全限制，禁止通过Windows盘符格式的本地绝对路径直接加载资源，避免恶意网页窃取用户本地文件数据，所以你直接填E:\Folders\ichchha.jpeg作为src会加载失败。

可用解决方案 #

• 方案1：使用相对路径（最推荐，本地测试和上线都适用）
  把图片和你的HTML文件放在同一目录层级，或者统一放到项目下的专门的资源文件夹，路径使用web标准的正斜杠/作为分隔符，不要用Windows的反斜杠\。
  比如你把ichchha.jpeg和HTML文件放在同一个文件夹，img标签直接写：
  <img src="ichchha.jpeg"/>
  如果图片放在HTML同级的assets文件夹下，就写：
  <img src="assets/ichchha.jpeg"/>
  对应的修改后完整代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Display property</title>
</head>
<body>
    <header class="top">
        <img src="ichchha.jpeg"/>
        <h3>Welcome to Ichchha's Blog</h3>
    </header>
</body>
</html>

• 方案2：转成file协议路径（仅适合本地自己测试用）
  如果不想调整文件位置，仅自己本地打开查看效果，可以把Windows绝对路径转成file协议格式，注意前缀加file:///，所有反斜杠换成正斜杠：
  <img src="file:///E:/Folders/ichchha.jpeg"/>
  注意：该方式仅你本地打开HTML能看到图片，其他人访问你的网页时无法加载该图片。
• 方案3：使用公网URL（适合上线发布场景）
  如果需要把网页发布到互联网给所有人访问，需要把图片上传到你的网站服务器或者公共图床，拿到图片的公网URL后替换src属性值即可，也就是你之前测试正常的用法。

内容的提问来源于stack exchange，提问作者Ichchha Gupta