HTML中img、video、a标签引用跨目录媒体资源无法正常显示问题

你遇到的加载失败问题是本地Web服务的根目录安全限制导致的：
绝大多数开发者调试HTML时会使用VS Code的Live Server类的本地HTTP服务，这类服务启动时会以你当前打开的工作区文件夹作为Web根目录，禁止访问根目录以外的文件，避免敏感文件泄露。
按你的目录结构，如果你是在D:\and文件夹下启动的本地服务，服务可访问的所有资源只能存在于D:\and及其子目录中。你写的../../images/img.png路径解析后会跳出D:\and目录访问D:\images，直接被服务拦截，因此返回Cannot GET /images/img.png错误。
如果是直接双击HTML文件走file协议打开，不会存在该限制，但会引发其他跨域问题，不符合生产环境的运行逻辑，不推荐使用该方式调试。

• 方案1：调整资源存放路径（最推荐，兼容本地调试和线上部署）
  将所有需要引用的媒体资源统一放到Web服务根目录内部，比如你启动服务的根目录是D:\and，就把images文件夹移动到D:\and目录下，此时HTML中路径写法修改为：

<img src="../images/img.png" alt="image">

即可正常加载。

• 方案2：修改本地服务的根目录（仅适合临时调试）
  如果不想移动现有资源，可以修改本地服务的启动根目录到更高层级，比如VS Code的Live Server可按Ctrl+,打开设置页，搜索Live Server > Settings: Root，将配置值改为D:\，重启服务后即可正常访问D:\images下的资源。注意该配置会暴露整个D盘的文件给本地服务，不要用于生产环境。
• 方案3：使用绝对磁盘路径（仅本地file协议预览可用）
  如果你直接双击HTML文件走file协议打开，可以直接写磁盘绝对路径，注意使用正斜杠/替代Windows默认的反斜杠\：

<img src="D:/images/img.png" alt="image">

该方式仅可用于本地临时预览，部署到线上服务器后会完全失效，不推荐常规开发使用。

内容的提问来源于stack exchange，提问作者Sourav Negi