d3中svg标签里插入图片不显示的解决方案

1. 使用背景

在d3中的svg元素中插入图片，图片未正常显示。

2. 使用image标签

首先，在svg中加载图片用的image标签，而不是img标签。支持的图片格式可以是 JPEG、PNG、SVG.。
该元素<img> 一样，会解析渲染为图片。

<image>常用属性：
●x定位坐标
● y定位坐标
● width 和 height 元素的尺寸
● href 或 xlink:href 需要加载的图像资源
● preserveAspectRatio 控制图像的缩放方式
● crosssorigin 设置跨域方式

3.浏览器开发者工具中检查图片

打开开发者工具，查看该图片的加载地址。
●图片放assets目录下： 如果图片地址转化成data URL ，则会正常显示图片。

●图片放public目录下：检查图片路径，看服务器是否能访问。

正确写法1：使用require去加载图片（图片在assets目录下）

正确写法2：使用import去加载图片（图片在assets目录下）


正确写法3：（图片在public目录下）

错误写法：是我一开始的写法，图片未正常显示。

✨ 什么是data URL

Data URL，即前缀为 data: 协议的 URL，其允许内容创建者向文档中嵌入小文件。它们之前被称作“data URI”，直到这个名字被 WHATWG 弃用。

语法：
Data URL 由四个部分组成：前缀（data:）、指示数据类型的 MIME 类型、如果非文本则为可选的 base64 标记、数据本身

data:[<mediatype>][;base64],<data>