您现在的位置:首页 >> 前端 >> 内容

HTML的img标签使用讲解

时间:2018/3/15 12:00:37 点击: 43

  核心提示:src 属性1.网上的链接img src =https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3228814396,135148145...

src 属性

1.网上的链接

<img src ="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3228814396,1351481453&fm=27&gp=0.jpg">

//引用网上图片

2.本地的链接 

本地链接分为两种:相对地址和绝对地址。

绝对地址我们通常是不用的,因为当文件上传到服务器上的时候,凡是用绝对地址写的链接统统都会失效的,因此我们都要选择相对地址。

相对地址中

../的意思是返回当前文件的上一层目录

./的意思是当前文件所在的目录

比如一张图片和这个html文件在同一个文件夹下面,那么我们就可以写

<img src=”./tupian.png”></img>

同时这个图片标签还有两个属性。

alt属性

这个属性是为其设置图片占位符,也就是说当图片因为网速或者链接错误等原因加载不出来的时候,就会显示alt里面我们设置的值。

title属性

图片提示符。当我们鼠标移入图片的时候,在鼠标旁边会出现一个黄色的小方块来显示这个title属性里面设置的值。

js处理img标签加载图片失败,显示默认图片

1.第一种方法: 

如果已经引入了jquery插件,就很好办。没有的话,如果实在需要,可以附上代码:

$('img').error(function(){

            $(this).attr('src', "1.jpg(默认图片的url地址)");

         });

2.第二种方法:如果img标签是少量的话,可以用这个: 

img的onerror事件

<img src='test.jpg' alt='test' onerror="this.src='default.jpg'">

Tags:HT TM ML L的 
作者:网络 来源:cmchenmei的
请选择您看到这篇文章时的心情: 已有0人表态:
0
0
0
0
0
0
0
0
惊讶 欠揍 支持 很棒 愤怒 搞笑 恶心 不解