# 11.图片在页面显示的方式有哪些?

# 一、img 标签

  1. 指向本地图片地址
  2. 指向绝对地址
  3. 指向 base64

# 二、background-image

# 三、转成 svg

使用方式:

一、SVG 代码可以写在一个以.svg 结尾的文件中,然后用<img><object><embed><iframe>等标签插入网页。

  1. <object>

    <object> 标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

    object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持,这一点并未实现。

  2. <embed>标签是 HTML 5 中的新标签,定义了一个容器,用来嵌入外部应用或者互动程序(插件)。

    注意:现在已经不建议使用 <embed>标签了,可以使用 <img>、<iframe>、<video>、<audio>等标签代替。

  3. <iframe>

    iframe 元素会创建包含另外一个文档的内联框架(即行内框架)

  4. <img>

二、SVG 文件还可以转为 BASE64 编码,然后作为 Data URI 写入网页。

<img src="data:image/svg+xml;base64,[data]">

三、用**<svg>**标签