这不起作用：
<img src="../assets/images/image.jpg" alt="Alternative Text">
但这是有效的:
<img src="http://localhost/abc/def/geh/assets/images/image.jpg" alt="Alternative Text">
在我的情况下，我无法使用绝对路径，只能使用相对路径。
9个回答
17
<img src="assets/images/image.jpg" alt="Alternative Text">
应该可以正常工作。您不应该在图像路径的开头加上“../”。
为了更好地理解相对路径与绝对路径，请参考此链接。
- Tharushi Geethma
13
"
"../assets/images/image.jpg" -这意味着
- '../' 上一级目录
- 找到 'assets/' 文件夹
- 找到 'images' 文件夹
- 找到 'image.jpg' 文件。
如果您的页面在子文件夹中，则相对链接仅适用于
"http://localhost/abc/def/geh/"
如果您的页面位于
"localhost/asdf/asdf/asdf/asdf/index.php"
（看起来很荒谬），为了相对地访问 assets 文件夹，您必须追溯到根目录。
'../../../../abc/deh/geh/assets/images/image.jpg;
或者您可以在 head 标签中使用 base 标签使 src 属性中的 URL 更友好。
"- user2782001
1
1除非
assets文件夹确实在当前文档的上一级目录中。然而，你是第一个想到询问这个问题的人，因此，为此点赞。 - Stuart Wagner3
Express应用程序的src路径
如果您正在使用Node.js与Express框架，其他答案将无法解决您的问题。
正如Express官方文档所述：
要提供静态文件（如图像、CSS文件和JavaScript文件），请在Express中使用内置的express.static中间件函数。
因此，您必须声明静态文件的文件夹。例如，如果您的图像位于：
[project root]/assets/images/image.jpg
如果您想要使用它，您应该在主JavaScript文件中（例如index.js或app.js）包含以下代码：
app.use(express.static('assets'))
那么您的img标签将会如下所示：
<img src="/images/image.jpg" alt="Alternative Text">
文档中提到：
Express相对于静态目录查找文件，因此静态目录的名称不是URL的一部分。
因此，在这个例子中，您应该在src路径中省略"assets"，并注意开头的"/"。
- RdC1965
2
我怀疑你没有按照我的要求去做，这里是截图：
http://localhost/asdf/asdf/asdf/asdf/assets/assets/image.jpg。不管怎样，请发送上述操作的截图。- Miro
1
我会让你的生活变得非常简单。
以下是使用方法：
<img src="../image_store/Part2.jpg" alt="Dress Picture"/>- Vinod Kumar
1
您可以检查一件事情：您当前页面的URL是否以“ /”结尾。因此，当我有像http://127.0.0.1:7777/www/这样的URL时，我的所有相对URL都有效，但是当我将其用作http://127.0.0.1:7777/www（末尾没有“ /”）时，浏览器会认为“ www”是文件而不是文件夹。也许可以在服务器端进行配置（在我的情况下，我运行自己编写的自定义HTTP服务器软件）。
- Fedir Tsapana
0
将内容导入JSX顶部的变量中，路径为"src/assets/images/..."，并在按钮的src中使用它（请参见下面的示例代码）。在assets/...之前以src/...开头。
import imageContent from 'src/assets/images/image.jpg';
.
.
.
<img src={imageContent}/>
- Tharusha
-1
请勿右键复制相对路径。只需按照以下语法进行操作：<img src="ImageFolderName\filename"
- Boine Sairam
1
-4
在React中：
导入图片：
import image from '../../assets/random-image.png'将导入的变量作为
src属性的值使用：<img src={image} />
- Eduard
4
3这不是一个关于 [tag:React] 的问题。 - Nino Filiu
1谢谢，这帮助我在React中将我的标志放在Navbarbrand上。 - Autom8
1这对我在React中也有帮助。非常感谢！ - Fatmajk
谢谢@Eduard，这帮助我解决了我的问题！ - jenkizenki
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
img元素，右键单击src并选择 在新标签页中打开图像 以查看它正在尝试获取的 URL。您还可以在控制台和网络选项卡中查看它。 - Mirotest.html的文件，里面只包含两个img标签（相对路径和绝对路径），看看是否有效。另外，您有检查其他浏览器吗？ - Miro