Vue如何由本地js中存放的url地址获取图片
更新时间:2023年09月26日 09:22:51 作者:默默的小跟班
这篇文章主要介绍了Vue如何由本地js中存放的url地址获取图片问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue由本地js中存放的url地址获取图片
对象必须放在js中(而不是json里面,json没有require)。
如果是在json中,需要采用其他方式去获取
注意:url地址必须用这种形式,有require
data.js
export const recommends = [ { "pic": require('./1.png'), "name": "adidas 阿迪达斯 训练 男子", "price": "335", "num": "1" }, ]
index.vue
import { recommends } from './img/recommend/recommend';
先引入
this.recommends = recommends;
然后要么在data里return这个对象,要么就采用这种赋值方式。
赋值方式可以省去多余的get/set方法
<p class="recommend-pic"><img class="recommend-img" :src="item.pic"></p> <p class="recommend-name">{{item.name}}</p>
读取对象数据,两个注意点:
- src前面 : (v-bind绑定)。
- 直接获取的参数需要两个花括号 {{ }}
Vue获取html字符串中的图片地址
1.正则表达式
const RegEx = /(?<=(img src="))[^"]*?(?=")/gims
2.获取html字符串中所有img标签图片地址(Array)
const htmlStr = '<p><img src="1.png" /><img src="2.png" /><img src="3.png" /><img src="4.png" /></p>' const images = text.match(RegEx)
3.Vue过滤器中加入获取img地址方法
如:getImgUrl
export default { filters: { getImgUrl(html) { const RegEx = /(?<=(img src="))[^"]*?(?=")/gims if(html && html.match(RegEx) && html.match(RegEx).length > 0) { return html.match(RegEx)[0] } return require('默认图片地址') }, // 过滤HTML文本中图片地址为本地磁盘地址的图片 getImgUrl2(html) { const RegEx = /(?<=(img src="))[^"]*?(?=")/gims if(html && html.match(RegEx) && html.match(RegEx).length > 0 && html.match(RegEx)[0].indexOf('file:///') === -1) { return html.match(RegEx)[0] } return require('默认图片地址') } } }
4、使用
<img :src="item.content | getImgUrl" alt="">
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue中使用gantt-elastic实现可拖拽甘特图的示例代码
这篇文章主要介绍了vue中使用gantt-elastic实现可拖拽甘特图,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-07-07vue2.0 better-scroll 实现移动端滑动的示例代码
本篇文章主要介绍了vue2.0 better-scroll 实现移动端滑动的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。2018-01-01vue中axios防止多次触发终止多次请求的示例代码(防抖)
这篇文章主要介绍了vue中axios防止多次触发终止多次请求的实现方法(防抖),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
最新评论