概述

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

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

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

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

<!-- html -->
<template v-for="(item, index) in values"><div class="icon-twrap"><img :src="item.icon" style="width: 60px" /></div>
</template>

// 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，结果成功~

<template v-for="(item, index) in values"> <div class="icon-twrap" style="width: 60px"v-html="item.icon"></div>
</template>

// script data
export default { data () {return { values: [{id: "1",label: "111",icon: "<svg class=\"icon\" style=\"width: 1em;height: 1em;...</svg>"}]}
...}
...
}

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

Vue中如何根据svg内容显示图片相关推荐

vue中引用tinymce图标不显示解决方法
vue中引用tinymce图标不显示解决方法通过官网查到一篇博客,按照上面步骤可以实现tinymce富文本编辑器的封装和使用. https://www.cnblogs.com/zhongchao66 ...
普中stm32开发板tftlcd显示图片_STM32实例TFTLCD介绍
以前我们用 51 单片机控制 TFTLCD(TFT 液晶屏)时,使用的是 IO 口模拟80 接口时序.这次我们来学习如何使用 STM32F1 的 FSMC(灵活的静态存储控制器)接口控制 TFTLCD ...
关于在vue当中，ios手机不显示图片，需要刷新解决问题
出现的bug是,在vue当中使用v-html渲染页面,图片使用了 <div v-lazy-container="{ selector: 'img' }"><div ...
vue中读取本地文件内容
其实就是使用 FileReader对象,h5提供的异步api,可以读取文件中的数据. <input @change="uploadCode($event)" type=&qu ...
vue 中 canvas 和svg合用制作地图
<template><div class="contents"><div class="lefttop1-title">区域 ...
oc中在控件上显示图片
当我们想在控件上改变图片的时候,我们需要做的是获得图片的引用,然后调用函数,来设置图片.那么具体是怎样来操作. 第一步是获得控件的引用: @property(weak,nonatomic)IBOutl ...
electron + vue中使用 el-table 死活不显示的问题
element-ui中el-table不显示 - 简书 Electron-Vue使用element-ui el-table不显示/卡死我们需要把element-ui加入到.electron-vue/ ...
Vue实现鼠标悬浮隐藏与显示图片效果 @mouseenter 和 @mouseleave事件
前言前端vue 有个功能是鼠标移动到指定item上显示出来一个编辑和删除的图标鼠标悬停在列表那么需要有悬浮显示的列表编辑和删除icon 文字不好描述,因为是web端录屏也比较麻烦这里用截图说明 ...
vue中页面跳转，显示在顶部
页面之间跳转,打开新的一个页面显示在顶部在main.js 中添加代码: router.afterEach((to, from, next) => {window.scrollTo(0, 0) ...

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

概述

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

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

解决思路

Vue中如何根据svg内容显示图片相关推荐

最新文章

热门文章