Vue中如何根据svg内容显示图片

概述

        在写前端项目中，我们免不了需要在页面上显示图片，有的是静态图片，需要直接访问项目内的文件；有的需要从后端接口动态获取图片信息，再在页面上显示。

        因为svg图片有：矢量图形，不受像素影响；SVG的结构是XML，其可访问性（盲文、声音朗读等）、可操作性、可编程性、可被CSS样式化完胜Canvas；等优点，所以在我的项目中多以svg为主。

方式一  --- 引用项目静态文件

        因为有的图片是固定在页面上的，而且需要初始化时就展示出来，所以这部分图片适合直接放入项目中，静态引入。

// script data
export default { 
  data () {
    return { 
      values: [
        {
          id: "1",
          label: "111",
          icon: require('@/assets/icon/test.svg')
        }]
      }
...
    }
...
}

        注意：这里在data里的icon的值，不能直接写图片在项目中的路径，而是需要用require进行引用。

方式二 --- 使用接口中的动态数据

解决思路

         可跳过，直接看最下面

        除去方式一中的引用项目文件，有时候我们还需要根据后台接口中返回的svg数据来显示。其实这里我有参考阿里的iconfont，它的界面上就是通过查询接口返回svg的内容来生成图片的

         因为我写的vue项目不多，所以一开始也摸不着头脑，不知道怎么把红框里的内容渲染到页面上去，于是我根据这里show_svg字段在chrome里的console里搜，定位到具体的代码部分

         找到这里，我就在代码里也写{{{ item.icon }}} ，可是一写就发现了问题，编译器对三个大括号不识别，编译也会报错。于是我又去搜索了 “ vue 三个大括号 ”，在第一条回答里找到了答案：

        “2.0 用 v-html 指令替代了，相同的效果~至于三大括号为啥废弃，我想一个是书写比较麻烦，一个是 2.0 的一个初衷是精简 api~”

        “容易把{{}}写成{{{}}}，这涉及到安全问题， 用v-html 或者jsx的 domPropsInnerHTML 更明确的表示此处插入html， 并且{{{}}}没有其他作用”

        “v-html怎么都比{{{}}}好啊，题主是不是老项目用了太多的仨括号了？”

        这里其实也反映出我对前端的不熟悉，老手应该一眼就看出来了。也说明阿里的前端需要改进啊 ^_^

        于是我就用v-html，结果成功~

// script data
export default { 
  data () {
    return { 
      values: [
        {
          id: "1",
          label: "111",
          icon: "

以上就是我遇到的关于在vue中显示svg图片的两种方式，新手入门，以作记录 ^_^