这不起作用:
<img src="../assets/images/image.jpg" alt="Alternative Text">
但这是有效的:
<img src="http://localhost/abc/def/geh/assets/images/image.jpg" alt="Alternative Text">
在我的情况下,我无法使用绝对路径,只能使用相对路径。
<img src="assets/images/image.jpg" alt="Alternative Text">
应该可以正常工作。您不应该在图像路径的开头加上“../”。
为了更好地理解相对路径与绝对路径,请参考此链接。
"../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 更友好。
"assets
文件夹确实在当前文档的上一级目录中。然而,你是第一个想到询问这个问题的人,因此,为此点赞。 - Stuart WagnerExpress应用程序的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 src="/images/image.jpg" alt="Alternative Text">
文档中提到:
Express相对于静态目录查找文件,因此静态目录的名称不是URL的一部分。
因此,在这个例子中,您应该在src路径中省略"assets",并注意开头的"/"。
http://localhost/asdf/asdf/asdf/asdf/assets/assets/image.jpg
。不管怎样,请发送上述操作的截图。<img src="../image_store/Part2.jpg" alt="Dress Picture"/>
将内容导入JSX顶部的变量中,路径为"src/assets/images/..."
,并在按钮的src中使用它(请参见下面的示例代码)。在assets/...
之前以src/...
开头。
import imageContent from 'src/assets/images/image.jpg';
.
.
.
<img src={imageContent}/>
导入图片:
import image from '../../assets/random-image.png'
将导入的变量作为src
属性的值使用:
<img src={image} />
img
元素,右键单击src
并选择 在新标签页中打开图像 以查看它正在尝试获取的 URL。您还可以在控制台和网络选项卡中查看它。 - Mirotest.html
的文件,里面只包含两个img
标签(相对路径和绝对路径),看看是否有效。另外,您有检查其他浏览器吗? - Miro