html中使用img标签图片无法正常显示

在学习html+css过程中，自己在编辑器里尝试使用img标签来显示图片，是一张鲜花的图片：

代码如下：刚开始写的是绝对路径，照片无法正常显示：后来经过问别人，别人建议把“\”换成“/”，更改后仍然无法正常显示；经检查，图片路径并无错误。

这是十分疑惑，不知道问题出在哪，于是又把图片移到了和代码同级目录下，看看相对路径是否能够成功。

移动后，将代码改成了

再次运行，浏览器上还是没有成功显示图片，只不过这次与上次的效果不同，之前是直接显示图片加载失败，并显示alt标签中的内容；这次则在显示一直加载，在等待服务器的相应：

经过查资料，在路径前加了一个“.”：

图片终于正常显示：

总结：

1.绝对路径无法显示的原因是：

在用浏览器打开网页时帮你虚拟了一个服务器（可以认为在此虚拟服务器外的文件相当于在另一个电脑里），因此你点击webstorm右上角的浏览器图标打开网页时，网页路径是localhost:xxxx而你的图片也显示不出来。

因此尽量使用图片的相对路径

相对路径的“.”是说在同一目录下，因此要记得加“.”

html中使用img标签图片无法正常显示相关推荐

android中网格布局背景图片,android 网格显示问题
按照教程进行操作不知道显示怎么成这样的效果上下两行的间隔太大而且文字和图片之间的间隔也很大布局文件也进行了修改还是不行有遇到过类似问题的人么希望您给我一点意见 mainactivity. ...
iframe标签中写html,html页面中嵌套iframe标签，我们可以用html中的iframe标签搞定
iframe嵌入网页的用法 iframe并不是很常用的,在标准的网页中非常少用.但是有朋友经常问到,下面我简单地介绍一下它的用法,你只要熟练掌握这些参数足矣. 也应该是框架的一种形式,它与不 ...
html css 如何将图片作为背景,CSS背景图片和HTML中的img标签
背景图片: 该图片是218*170 css内容: div{ width: 100px; height: 100px; background: url(img/1.jpg); border: 2px s ...
图片在section上下居中_HTML5中的section标签是什么？HTML5中的section标签怎么居中？...
HTML5中的section标签是什么?HTML5中的section标签怎么居中?本篇文章就详细地为大家举出了实例,方便大家的观看,其中的HTML5中section的定义和作用,都有实例在里面.(后面 ...
div 不受父级标签影响_前端H5开发中常用的标签
本文主要内容排版标签: <h1> <p> <hr /> <br /> <div> <span> <center> ...
word中有注释标签吗_如何在Word中注释图像
word中有注释标签吗 If you're writing a document that includes images, you may want to add annotations to t ...
[html] html页面中如何实现gif图片重新播放？
[html] html页面中如何实现gif图片重新播放? 因为浏览器会缓存图片,所以对于一次性gif如果不做处理的话,只会播放一次.如果需要重新播放gif,重新设置下img标签的src属性即可个人简 ...
html中所有的标签,HTML中的所有标签及其做用！
用户提问 ,表示该文件为HTML文件 ,包含文件的标题,使用的脚本,样式定义等 ---,包含文件的标题,标题出现在浏览器标题栏中 ,的结束标志 ,放置浏览器中显示信息的所有标志和属性,其中内容在浏览器 ...
Java读取HTML传人文件,java读取html文件并获取body中所有的标签及内容的案例.pdf
java读读取取html文文件件,并并获获取取body中中所所有有的的标标签签及及内内容容的的案案例例这里的获取的是html文件中body 中的所有标签以及内容 package com.lmt.se ...
html+include设置,html中的include标签是什么？htmlinclude实现配置解析
本篇文章介绍了关于html中的include的配置用法,让HTML文件也能实现include的功能,现在我们一起来看看这篇关于html include的文章吧首先我们介绍html中的include标 ...

html中使用img标签图片无法正常显示

html中使用img标签图片无法正常显示相关推荐

最新文章

热门文章