css img标记不适用于src中的相对路径

14ifxucb  于 2023-02-26  发布在  其他
关注(0)|答案(9)|浏览(156)

这是行不通的:

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

但这是有效的:

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

在我的场景中,我不能使用绝对路径,而必须使用相对路径。

jq6vz3qz

jq6vz3qz1#

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

应该正在工作。您不应该在映像路径的开头放置“../”。
要更好地了解相对路径与绝对路径,请参阅this link

kx1ctssn

kx1ctssn2#

“.../资产/图像/图像. jpg”-这意味着
1.'../'从我现在所在的目录上移一个目录
1.查找“assets/”文件夹
1.查找这'images'文件夹
1.找到“image.jpg”文件。
仅当页面位于的子文件夹中时,相对链接才有效
http://localhost/abc/def/geh/
如果页面的位置确实是
“本地主机/asdf/asdf/asdf/索引. php”
(这看起来很荒谬)相对来说,要到达资产文件夹,你必须一直到根目录。
'.../.../.../abc/德赫/盖赫/资产/图像/图像. jpg;
或者,您可以在head标记中使用base标记,以使实际src属性中的URL更友好。

qaxu7uf2

qaxu7uf23#

我怀疑你实际上没有做我告诉你的事情,所以这里是一个截图:

如果图片在新标签页打开,那么你有一些bug或者扩展,把它在html中弄乱了。如果你弄乱了相对路径,你很可能会得到404,但是你可以看到绝对路径。它可能看起来像http://localhost/asdf/asdf/asdf/asdf/assets/assets/image.jpg无论哪种方式,发送上面操作的截图。

yiytaume

yiytaume4#

    • Express应用程序的源路径**

如果您使用的是Node. jsExpress框架,其他答案将无法解决您的问题。
Express' official documentation中所述:
要提供静态文件(如图像、CSS文件和JavaScript文件),请使用Express中内置的expression.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",并且还要注意开头的"/"。

snvhrwxg

snvhrwxg5#

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

<img src="../image_store/Part2.jpg" alt="Dress Picture"/>
lvjbypge

lvjbypge6#

你可以检查一件事:是你的当前页面的网址以“/"结尾。所以当我有像http://127.0.0.1:7777/www/这样的网址时,我所有的相对网址都在工作,但当我使用它作为http://127.0.0.1:7777/www(结尾没有“/”)浏览器认为“www”是文件而不是文件夹。可能这可以以某种方式配置服务器端(在我的情况下,我运行由我编写的自定义http服务器软件)。

8mmmxcuj

8mmmxcuj7#

将内容导入到JSX顶部的一个变量中,路径为"src/assets/images/...",并在按钮src中使用它(参见下面的示例代码)。

import imageContent from 'src/assets/images/image.jpg';

.
.
.

<img src={imageContent}/>
v7pvogib

v7pvogib8#

不需要右键复制相对路径,只需按照下面的语法**〈img src=“ImageFolderName\filename”**

zte4gxcn

zte4gxcn9#

React中:
1.导入图像:

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

1.将导入的变量用作src属性的值:

<img src={image} />

相关问题