<img>标签显示不出图片——图片路径问题

最新推荐文章于 2024-04-30 20:15:41 发布

cc_bk

最新推荐文章于 2024-04-30 20:15:41 发布

阅读量1.8w

点赞数 11

分类专栏： html5+css3 文章标签： img 显示图片 html 相对路径绝对路径

本文链接：https://blog.csdn.net/cc_bk/article/details/84105946

版权

2 篇文章 0 订阅

订阅专栏

引言：

	大家在进行开发的过程中，经常会有显示图片这个需求，但是却经常因为种种问题显示不了，接下来，我将详细叙述这个问题，希望对大家有所帮助。

图片显示不出，一般有三个问题：

1.使用绝对路径
解决方法：
右键查看图片的详细属性，对比文件所在路径与书写的url,再进行修改即可。

2.使用相对路径
①要显示的图片和文件在同一目录下
在这里插入图片描述
源码：

<body>
	<img src="timg.jpeg" >
</body>

②图片在html文件的下一级
在这里插入图片描述
源码：

<body>
	<img src="img/timg.jpeg" >
</body>

③图片在html文件的上一级
在这里插入图片描述
源码：

<body>
	<img src="../timg.jpeg" >
</body>

其他的种种路径无非是这几种的组合，只需参照这三个例子修改路径即可

系统自动隐藏了图片后缀名，本来是.png格式，却写成了.jpg或.jpeg

解决方法：

右键查看图片的详细属性，观察图片的后缀名,再进行修改即可。

部分浏览器对有些路径书写方式不支持。

例子：
图片和文件的相对路径：
在这里插入图片描述
源码：

<body>
	<img src="../timg.jpeg" >
</body>

结果：
safari：
在这里插入图片描述

firefox：
在这里插入图片描述

关注