图片＜img＞

今天药忘吃喽~ 2024-03-29 15:45 102阅读 0赞

## 添加图片 ##

HTML中就是一个空元素，可以用img元素来为你的网站添加图片，其中src属性指向一个图片的地址。  
![在这里插入图片描述][fd592043b4734dc9b762cc9c850f2638.png]  
注意：img是单标签元素, 没有结束标签(闭合标签)。

## alt属性 ##

img元素alt属性中的文本是当图片无法加载时显示的替代文本。  
总而言之，alt 属性是一个必需的属性，为页面上的图片都加上 alt 属性是好习惯。  
![在这里插入图片描述][076b74b905294f2b86f66e04d08e3804.png]  
如果省略 alt 属性，且图片无法正常加载时会出现一个有裂痕的图片展示。  
如果把这个属性设置为空字符串（alt=“”），则图片无法展示的时候，会出现空白内容  
![在这里插入图片描述][aa29b23362cf44a294a139f5732badee.png]

## 给图片添加链接 ##

可以通过将img元素嵌套在a元素中使其变为一个链接。  
![在这里插入图片描述][7de831c5db03433a83bed2b539844a37.png]  
注意: 使用 \# 作为元素的 href 属性, 表示将其转换为固定链接。  
提示: 当鼠标悬停在图片上时，鼠标的光标如果从箭头指针变成手形指针, 那么此时图片就是一个链接了。

[fd592043b4734dc9b762cc9c850f2638.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/96c68c8f4bb24ae2b859c1357208ce2e.png
[076b74b905294f2b86f66e04d08e3804.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/af95417180da4f18aa964c24ee43b792.png
[aa29b23362cf44a294a139f5732badee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/613377d2a61747109329df800769ab0f.png
[7de831c5db03433a83bed2b539844a37.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/199f8e8366414fbda516e565b3312216.png

发表评论取消回复

表情：

评论列表（有 0 条评论，102人围观）

还没有评论，来说两句吧...

相关阅读

相关图片＜img＞

添加图片 HTML中就是一个空元素，可以用img元素来为你的网站添加图片，其中src属性指向一个图片的地址。 ![在这里插入图片描述][fd592043b4734dc

今天药忘吃喽~/ 2024年03月29日 15:45/ 0 赞/ 103 阅读

相关 img图片加载失败？

问题场景在工作中经常会使用< img >标签进行图片展示，但是经常有图片加载失败的情况发生（图片地址不存在、图片已经删除等）。场景再现图片加载失败时的用户体

忘是亡心i/ 2024年02月19日 18:09/ 0 赞/ 66 阅读

相关图片img

一、图片大小自适应问题： 1、图片自适应div大小：图片自适应div大小主要是控制图片的宽度，可以通过设置css里面的width属性来解决问题。 img{ widt

快来打我*/ 2023年01月11日 01:20/ 0 赞/ 139 阅读

相关 img图片不显示时设置默认图片

img标签显示图片： <img src="url" alt="error txt" /> 当图片地址错误时，就是显示error txt，为了更好的用户体验，通常我们

蔚落/ 2022年12月23日 06:45/ 0 赞/ 337 阅读

相关 vue img标签显示默认图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9u

╰+哭是因爲堅強的太久メ/ 2022年11月15日 11:55/ 0 赞/ 325 阅读

相关【css】让img图片居中显示

1.说明想要点击一下居中展示一张图片，可以使用fixed布局，展示图片的时候背景呈半透明黑色，再点击即隐藏 2.代码 HTML <div id="di

ゝ一纸荒年。/ 2022年10月19日 04:19/ 0 赞/ 226 阅读

相关点击按钮，缩放图片（img.width、img.style.width、img.offsetWidth）

前几天在慕课网上看到一个关于图片缩放的教学视频，因为当时对老师使用img.width,而不是使用img.style.width而感到奇怪，所以周末得空了，想来自己试着写出来，相

谁借莪１个温暖的怀抱￠/ 2022年06月16日 08:28/ 0 赞/ 217 阅读

相关 img标签读取本地图片

// 给img赋图片 <img id = "preview"src="./static/images/img.jpg"> $("preview").

川长思鸟来/ 2022年06月10日 00:41/ 0 赞/ 436 阅读

相关 img图片不存在时设置默认图片

例如，有以下代码： \[html\] [view plain][] [copy][view plain] 1. <img src="图片的url地址" alt="图片

浅浅的花香味﹌/ 2022年06月04日 00:35/ 0 赞/ 399 阅读

相关 img显示base64图片

<img alt="Red Star" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0e

短命女/ 2022年05月31日 05:16/ 0 赞/ 312 阅读