HTML模态框中img标签加载本地图片不显示如何解决

问题场景 #

实现HTML模态框图片展示功能时，已确认图片与HTML文件存放在同一文件夹，但图片始终无法正常加载，原有实现代码如下：

<div class="modal-dialog" role="document">
    <div class="modal-content"></div>

    <div class="modal-body">
        <img id=image src="C:\Users\Alex Cornelius\PythonPros\COVwebpage\templates\COVStruct1.png" alt="Click on button"/>
    </div>

    <div class="modal-footer">
        <button
            type="button"
            class="btn btn-secondary"
            data-dismiss="modal">
            Close Image
        </button>
    </div>
</div>

核心问题点 #

• 图片src使用了本地磁盘绝对路径，浏览器出于安全策略限制，禁止网页直接加载本地文件系统的绝对路径资源；如果是Flask这类Python Web项目，templates目录用于存放渲染模板，不对外提供静态资源访问，直接引用该目录下的文件会被服务拦截。
• 模态框DOM结构不符合规范：modal-body、modal-footer节点被放在了modal-content容器外部，会导致模态框渲染异常。

修复步骤 #

• 修正图片路径
  既然图片和HTML文件同目录，直接使用相对路径作为src属性值即可，将原有C盘绝对路径替换为COVStruct1.png。

  如果是Flask项目，建议将图片移动到项目的static静态资源目录，图片路径写为/static/COVStruct1.png，不要直接引用templates目录下的资源。

• 修正模态框结构
  将modal-body、modal-footer节点移动到modal-content容器内部，符合Bootstrap模态框的DOM结构要求。
• 加载异常校验
  按F12打开浏览器开发者工具，切换到「网络」面板刷新页面，查看图片请求的状态：
  • 状态码404：路径配置错误，对照面板中显示的图片实际请求地址，调整相对路径层级
  • 状态码403：资源访问权限不足，检查Web服务是否开放对应目录的静态资源访问权限
  • 跨域类报错：直接双击本地HTML文件通过file协议预览导致，启动本地Web服务后再访问页面即可

修复后参考代码 #

<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <img id="image" src="COVStruct1.png" alt="Click on button"/>
        </div>
        <div class="modal-footer">
            <button
                type="button"
                class="btn btn-secondary"
                data-dismiss="modal">
                Close Image
            </button>
        </div>
    </div>
</div>

注意：网页代码中禁止写本地C盘、D盘这类绝对磁盘路径，这类路径仅能在开发者本人的本地设备上被识别，换设备访问、部署到服务后完全无法定位资源，所有前端静态资源必须使用相对路径或Web服务分配的静态资源路由地址。

内容的提问来源于stack exchange，提问作者Alex Cornelius