HTML，img标签src路径错误及src路径图片无法显示问题，相对路径和绝对路径，超级详细的新手教程。

img标签src路径图片无法显示的原因。

1.路径问题，路径可分为绝对路径和相对路径。

（1）绝对路径：很多编译器不能把图片的绝对路径解析出来，因此图片无法在网页中显示，而且在开发过程中，一般都是使用相对路径，不过值得注意的是，如果你坚持要使用绝对路径，那你的图片文件不能放在桌面上，因为这可能会涉及到权限的问题而导致图片无法显示。

（2）**相对路径：**很多初学者可能无法理解相对路径的层级关系，我在这里就给大家列举几种情况，来帮助大家理解学习。

举例一：

如上图显示，我们index.html页面和img目录是处于同一个级别的，所以我们需要访问img目录下的图片时，只需要写入路径信息**“img/1111.jpg”**即可。

结果：

图片成功显示。

举例二：

如上图显示，和第一个例子不同的是，此时，index.html页面是在yemian目录之下，不再是img目录的同级。

此时的index是与1111.jpg处于同一目录下的，于是我又加了一条语句**<img src="1111.jpg">**

<img src="1111.jpg">   //同级<img src="img/1111.jpg">  //不同级

那么以上两行代码那个会显示出图片来呢，相信你已经有答案了，看下结果。

结果：

可以看见，同级的显示出来了，不同级的无法显示。

<img src="img/1111.jpg">  //显然，在执行这句代码时，index.html在与它同级的目录中，没有找到一个名叫**img的目录**，更不用说找到其下面的图片文件了。

那么，如何去访问不同级的图片呢？我们在看一下目录结构。

如果index.html需要使用img目录下的图片，则需要先返回上一级目录,语句如下。

 <img src="../img/1111.jpg">

index.html返回上一级目录后，就能找到同级目录下的img目录。

结果：

可以看见，两个熊头都显示出来了。

那么，如果目录还要比这更加复杂呢？

举例三：

可以看见，在yemian目录之下，又多了一个yemian2目录，此时我要使用img目录下的图片文件，又该如何呢？

其实很简单，既然加个…/可以返回上一层目录，那我再加一个，不就行了。

到这里相信很多人已经理解了。

<img src="../../img/1111.jpg">  //不同级  返回两层目录。

2.除了路径问题，也可能是图片后缀以及语句书写错误，要留意图片是PNG格式，还是jpg格式的，别写错了，仔细检查是否有不对的地方。

3.浏览器兼容问题，可以更换浏览器尝试。

4.还有部分无法显示图片的原因是发生在上传图片之后，图片无法立马显示，这类问题我将在后面的文章中细说。

以上，如果上述内容解决了你的图片无法显示的问题，别忘记点个赞哦，这样，以后将会出现更多能帮助你的文章！

HTML，img标签src路径错误及src路径图片无法显示问题，相对路径和绝对路径，超级详细的新手教程。相关推荐

webpack打包js文件，图片路径错误，没有将图片打包的问题
初用 webpack 进行项目开发的同学会发现:在 js 或者 vue 中引用的图片都没有打包进 bundle 文件夹中.这时是需要require的方式进行图片路径的引用,这样引用的图片就可以成功打包 ...
vue图片路径错误，展示默认图片
相信很多小伙伴都遇到过这个需求:当后端返回的图片路径为空,或者是返回的路径是错误的,需要展示默认图片有个比较简单的方法:就是使用 img标签自带的 onerror 方法但是这个方法在 src 为 ...
python调用高德地图api获取路径规划，然后规划好点显示在地图上（农机路径转移）
我的博客好像跳度比较大,不少内容都涉及,但我是做ros组合导航的,其他的或者是项目设计,或者是因为兴趣,或者是随笔记下来. 无聊写来玩下的小demo,本来试图在硕士期间研究下这个课题即农机从仓库到田间 ...
vue 动态绑定 backgroundimage问题，以及动态绑定img的src,图片无法显示问题
(以下情况是通过style设置内联样式以及动态绑定img的src时发生的问题,.在外部css文件和style标签里面定义的样式不会出现以下问题) 我们可能会通过以下这种方式来设置元素的背景(注意元素需 ...
vue中设置内联样式style 动态绑定背景图backgroundimage不生效问题，以及动态绑定img的src,图片无法显示问题(src=“[object Module]“)
(以下情况是通过style设置内联样式以及动态绑定img的src时发生的问题,.在外部css文件和style标签里面定义的样式不会出现以下问题) 我们可能会通过以下这种方式来设置元素的背景(注意元素需 ...
java.net.MalformedURLException: unknown protocol: c 这个错一般有两种原因导致： 1、URL协议、格式或者路径错误，...
java.net.MalformedURLException: unknown protocol: c这个错一般有两种原因导致:1.URL协议.格式或者路径错误, 好好检查下你程序中的代码如果是路径问 ...
HTML中img标签的src属性为绝对路径时，在IE中图片可显示，在firefox中不行
HTML中img标签的src属性为绝对路径时,在IE中图片可显示,在firefox中不行下图,src中为图片的绝对路径,此时在IE浏览器中图片可显示出来,firefox浏览器中图片不能显示出来代码 ...
vue :src 文件路径错误
首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形 ...
img标签 src路径正确但图片不显示
问题描述用浏览器请求时,图片正常显示 src内的链接也是正确的解决方案 head标签插入如下代码: <meta name="referrer" content=" ...

HTML，img标签src路径错误及src路径图片无法显示问题，相对路径和绝对路径，超级详细的新手教程。

HTML，img标签src路径错误及src路径图片无法显示问题，相对路径和绝对路径，超级详细的新手教程。相关推荐

最新文章

热门文章