HTML vs Javascript .. 图像文件路径如何工作？答案

【问题标题】：HTML vs Javascript.. How does filepathing to images work?HTML vs Javascript .. 图像文件路径如何工作？
【发布时间】：2015-12-17 05:46:45
【问题描述】：

我注意到在 HTML 中，图像源从我的页面位置（基础）所在的任何位置开始。因此，如果我的图片或图像在另一个文件夹中，我可以通过以下方式来简写 src：

<img src="avatars/dwarf14.jpg">

但是我注意到在 javascript 中，我不能做同样的事情。我必须输入整个 C 目录才能找到相同的图像。为什么是这样？我假设我的图像路径的起始位置是我的 javascript 文件所在的位置。

dom.el("playeravatar").innerHTML = '<img src="C:/Users/Q/Desktop/Gaming Project/avatars/warrior4.jpg">';

【问题讨论】：

我认为您在这里混淆了客户端（浏览器）和服务器。我认为您的错误在于您尚未将网络服务器配置为指向图像文件夹。
请注意，前导斜杠表示绝对 va 相对。 avatars/img.jpg 与 /avatars/img.jpg 不同。

标签： javascript html

【解决方案1】：

该脚本只是将img 标记添加到DOM。然后浏览器将解析这个标签，就像一个硬编码或通过任何其他方式添加的标签一样。 src 属性的解释方式与 javascript 无关。

因此，javascript 文件的位置无关紧要。您的路径应该相对于您插入图像的文档。

【讨论】：

【解决方案2】：

不，不是这样。图片路径的起始位置是加载 .js 文件的 html 页面：)

【讨论】：

【解决方案3】：

<img id='img' src='img.jpg' style="max-height: 200px; max-width:200px" /> <br />
<img id='imgJS' style="max-height: 100px; max-width:100px" /> <br />
<div id='divJS' />
<script type="text/javascript">
    document.getElementById('imgJS').src = 'img.jpg';
    document.getElementById('divJS').innerHTML = '<img src="img.jpg" style="max-height: 50px; max-width:50px" /> <br />';
</script>

我能够从 javascript 加载图像。上面的代码在一个 img 标签上设置了相同的图像，并在一个 div 标签内添加了一个新的 img 标签，其中 source 设置了，使用不同的大小来区分。将此代码和图像放在同一文件夹中，它可以工作。

大卫给出了恰当的解释。 DOM 处理路径并且是相对于文档的，而不是相对于 JavaScript 文件的。

【讨论】：