【Angular】在html和ts中引用图片路径前端笔记

图片方式1：相对路径

<img src="../../../../../assets/img/dotted.png">  

缺点：当所使用的html文件移动，或者别的地方复制过去的就可能找不到图片文件了。

图片方式2：assets路径

<img src="assets/img/dotted.png" >  

图片方式3：asset根路径

html中：

<img src="/assets/img/dotted.png" >  

css中：

.play {
    background-image: url("/assets/img/play.png")
}

图片方式4：echarts配置ts中使用图片

legend: {
  bottom: 10,
  data:[
    {
      name: '超速报警',
    },
    {
      name: '平均值',
      textStyle: {
        color: '#ed6d3b',
      },
      icon: "image://assets/img/dotted.png"
    }
  ]
},

使用的项目对应的angular.json配置环境

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
    "output": "/assets/"
  }
],

在angular中使用图片发现出不来，尤其是echarts的配置中，后来就去研究了一下，记录笔记总结一下方便以后使用，如果你搜到本文也希望能给你提供帮助。

参考：
博文 | angular–图片路径
echarts文档 | legend.icon