这是行不通的:
<img src="../assets/images/image.jpg" alt="Alternative Text">
但这是有效的:
<img src="http://localhost/abc/def/geh/assets/images/image.jpg" alt="Alternative Text">
在我的场景中,我不能使用绝对路径,而必须使用相对路径。
jq6vz3qz1#
<img src="assets/images/image.jpg" alt="Alternative Text">
应该正在工作。您不应该在映像路径的开头放置“../”。要更好地了解相对路径与绝对路径,请参阅this link
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更友好。
qaxu7uf23#
我怀疑你实际上没有做我告诉你的事情,所以这里是一个截图:
如果图片在新标签页打开,那么你有一些bug或者扩展,把它在html中弄乱了。如果你弄乱了相对路径,你很可能会得到404,但是你可以看到绝对路径。它可能看起来像http://localhost/asdf/asdf/asdf/asdf/assets/assets/image.jpg无论哪种方式,发送上面操作的截图。
http://localhost/asdf/asdf/asdf/asdf/assets/assets/image.jpg
yiytaume4#
如果您使用的是Node. js和Express框架,其他答案将无法解决您的问题。如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",并且还要注意开头的"/"。
snvhrwxg5#
我会让你的生活非常非常简单。按以下方式使用
<img src="../image_store/Part2.jpg" alt="Dress Picture"/>
lvjbypge6#
你可以检查一件事:是你的当前页面的网址以“/"结尾。所以当我有像http://127.0.0.1:7777/www/这样的网址时,我所有的相对网址都在工作,但当我使用它作为http://127.0.0.1:7777/www(结尾没有“/”)浏览器认为“www”是文件而不是文件夹。可能这可以以某种方式配置服务器端(在我的情况下,我运行由我编写的自定义http服务器软件)。
8mmmxcuj7#
将内容导入到JSX顶部的一个变量中,路径为"src/assets/images/...",并在按钮src中使用它(参见下面的示例代码)。
"src/assets/images/..."
import imageContent from 'src/assets/images/image.jpg'; . . . <img src={imageContent}/>
v7pvogib8#
不需要右键复制相对路径,只需按照下面的语法**〈img src=“ImageFolderName\filename”**
zte4gxcn9#
React中:1.导入图像:
import image from '../../assets/random-image.png'
1.将导入的变量用作src属性的值:
src
<img src={image} />
9条答案
按热度按时间jq6vz3qz1#
应该正在工作。您不应该在映像路径的开头放置“../”。
要更好地了解相对路径与绝对路径,请参阅this link
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更友好。
qaxu7uf23#
我怀疑你实际上没有做我告诉你的事情,所以这里是一个截图:
如果图片在新标签页打开,那么你有一些bug或者扩展,把它在html中弄乱了。如果你弄乱了相对路径,你很可能会得到404,但是你可以看到绝对路径。它可能看起来像
http://localhost/asdf/asdf/asdf/asdf/assets/assets/image.jpg
无论哪种方式,发送上面操作的截图。yiytaume4#
如果您使用的是Node. js和Express框架,其他答案将无法解决您的问题。
如Express' official documentation中所述:
要提供静态文件(如图像、CSS文件和JavaScript文件),请使用Express中内置的expression.static中间件函数。
所以你必须声明你的静态文件的文件夹。例如,如果你的图像位于:
那么你应该在你的主javascript文件(例如index.js或app.js)中包含:
那么你的img标签应该是这样的:
同样,文档说明:
Express查找相对于静态目录的文件,因此静态目录的名称不是URL的一部分。
因此,在本例中,您应该省略src路径中的"assets",并且还要注意开头的"/"。
snvhrwxg5#
我会让你的生活非常非常简单。
按以下方式使用
lvjbypge6#
你可以检查一件事:是你的当前页面的网址以“/"结尾。所以当我有像http://127.0.0.1:7777/www/这样的网址时,我所有的相对网址都在工作,但当我使用它作为http://127.0.0.1:7777/www(结尾没有“/”)浏览器认为“www”是文件而不是文件夹。可能这可以以某种方式配置服务器端(在我的情况下,我运行由我编写的自定义http服务器软件)。
8mmmxcuj7#
将内容导入到JSX顶部的一个变量中,路径为
"src/assets/images/..."
,并在按钮src中使用它(参见下面的示例代码)。v7pvogib8#
不需要右键复制相对路径,只需按照下面的语法**〈img src=“ImageFolderName\filename”**
zte4gxcn9#
React中:
1.导入图像:
1.将导入的变量用作
src
属性的值: