html中插入图片img的相对路径

JSP和图片位置关系如图
在这里插入图片描述
正确的相对路径写法:
在这里插入图片描述
注意,images前面的斜杠不带。

所以明白了这个,那么在css中的background-image的url也是这样:
在这里插入图片描述

网上好多说的都是错误的,查了好多地方,终于解决了。


【补充:】

这段时间又开发一个项目,用到SpringBoot,里面的模板引擎不是jsp了,变成thymeleaf,同样又遇到了照片路径的问题。。。

这次的项目结构是这样的:
在这里插入图片描述
那么我们在deletePhoto.html中使用img标签引入sheep.jpg图片怎么写地址呢?

<img src="/upload/sheep.jpg" />

这样就好了。

  • 9
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用相对路径插入图片HTML文件。根据引用的说明,如果图片HTML文件在同一路径下,只需要图片的名称即可,例如<img src="eg_cute.gif" width="300" height="300" />。如果想将图片HTML文件分开存放在不同的文件夹里,可以使用相对路径来指定图片的位置。例如,如果图片存放在img文件夹下面,HTML文件存放在template文件夹下面,公共根目录为mysite,那么图片的URL可以改为/mysite/img/eg_cute.gif。这样就可以正确插入图片了。另外,还可以使用上级路径来访问图片。比如,如果HTML文件与file文件夹同级,要插入的图片photo在file文件夹,可以使用<img src="file/photo.jpg">的代码来完成插入图片的操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [HTML网页显示图片相对路径 绝对路径)](https://blog.csdn.net/weixin_44338928/article/details/115670810)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [HTML路径讲解与跨级别插入图片](https://blog.csdn.net/Harrysau/article/details/122701996)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值