img 标签不适用于 src 中的相对路径答案

【问题标题】：img tag not working with relative path in srcimg 标签不适用于 src 中的相对路径
【发布时间】：2015-10-02 12:43:27
【问题描述】：

这不起作用：

<img src="../assets/images/image.jpg" alt="Alternative Text">

但这是有效的：

<img src="http://localhost/abc/def/geh/assets/images/image.jpg" alt="Alternative Text">

在我的场景中，我无法使用绝对路径。我必须使用相对路径。

【问题讨论】：

此 HTML 所在页面的 URL 是什么？
localhost/asdf/asdf/asdf/asdf/index.php
检查img 元素，右键单击src 并在新标签中打开图片 以查看它试图获取的网址。您也可以在控制台和网络选项卡中看到它。
@miro 是的，我已经做到了。当我在 netbeans 中运行时，它以任何一种方式显示图像。但是当我在浏览器上运行时，它不起作用
制作一个test.html，里面只有2个img标签（相对和abs），看看是否有效......另外，你检查过其他浏览器吗？

标签： html css image

【解决方案1】：

不要右键单击并复制相对路径。只需遵循以下语法

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

您可以检查一件事：您当前的页面网址是否以“/”结尾。因此，当我有像 http://127.0.0.1:7777/www/ 这样的 url 时，我所有的相对 url 都可以工作，但是我将它用作 http://127.0.0.1:7777/www（最后没有“/”）浏览器认为“www”是文件而不是文件夹。可能这可以通过某种方式在服务器端进行配置（在我的情况下，我运行我编写的自定义 http 服务器软件）。

【讨论】：

【解决方案3】：

我会让你的生活变得非常简单。
按以下方式使用它

&lt;img src="../image_store/Part2.jpg" alt="Dress Picture"/&gt;

【讨论】：

【解决方案4】：

在反应中：

导入图片：

import image from '../../assets/random-image.png'

将导入的变量用作src 属性的值：
```
<img src={image} />
```

【讨论】：

这不是react 问题
感谢这帮助我在 React 中的 Navbarbrand 上获得了我的徽标
这对我在 React 中也有帮助。非常感谢！
感谢@Eduard，这有助于解决我的问题！

【解决方案5】：

<img src="assets/images/image.jpg" alt="Alternative Text">

应该可以工作。您不应该将“../”放在图像路径的开头。

要更好地了解相对路径与绝对路径，请参阅this link

【讨论】：

【解决方案6】：

我怀疑你实际上并没有按照我告诉你的去做，所以这里是一个截图：

如果图像在新选项卡中打开，那么您有某种错误或扩展程序将其在 html 中弄乱了。如果您弄乱了相对路径，您很可能会得到 404，但您可以将路径视为绝对路径。它可能看起来像http://localhost/asdf/asdf/asdf/asdf/assets/assets/image.jpg 无论哪种方式，请发送上述操作的屏幕截图。

【讨论】：

【解决方案7】：

"../assets/images/image.jpg" - 这意味着

'../' 从我现在所在的位置上移一个目录
找到“assets/”文件夹
找到“图片”文件夹
找到“image.jpg”文件。

只有当您的页面位于子文件夹中时，该相对链接才有效

“http://localhost/abc/def/geh/”

如果你的页面位置真的是

“本地主机/asdf/asdf/asdf/asdf/index.php”

（这似乎很荒谬）相对而言，要访问资产文件夹，您必须一直到根目录。

'../../../../abc/deh/geh/assets/images/image.jpg;

或者，您可以在 head 标记中使用 base 标记，以使实际 src 属性中的 URL 更友好。

【讨论】：

除非assets 文件夹确实是当前文档之上的一个目录。然而，你是第一个想到问的人，所以，荣誉。