html无法正常显示图片或者视频等的原因分析

html的使用src无法正常显示图片或者视频等的原因

如下,这是我网页文件存放的位置,大家能看到我的图片是跟网页存放在同一个根目录下在这里插入图片描述那么再看看代码,实现效果图。
在这里插入图片描述
代码区域

<img src="2.jpg" height="250" width="250"/>
<img src="2-2.jpg"/>
<img src="2-3.jpg"/>

效果图
在这里插入图片描述请仔细观察下代码和图,再对比下下面的图
在这里插入图片描述代码区域

<img src="img/2.jpg" height="250" width="250"/>
<img src="img/2-2.jpg"/>
<img src="img/2-3.jpg"/>

效果图
在这里插入图片描述通过对比上面是否有发现什么不同之处,没错,是存放位置变化了,那么为什么图片移动没有让图片无法显示出来?原因是因为我改了代码区域的src属性的属性值:路径
路径有两种:绝对路径相对路径

绝对文件路径

绝对文件路径是指向一个因特网文件的完整 URL:
实例

<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">

相对路径

相对路径指向了相对于当前页面的文件。

在本例中,文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件:
实例

<img src="/images/picture.jpg" alt="flower">

在本例中,文件路径指向了位于当前文件夹中 images 文件夹里的一个文件:
实例

<img src="images/picture.jpg" alt="flower">

在本例中,文件路径指向了位于当前文件夹的上一级文件夹中 images 文件夹里的一个文件:
实例

<img src="../images/picture.jpg" alt="flower">

好习惯

使用相对路径是个好习惯(如果可能)。

如果使用了相对路径,那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

长高

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值