首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue由本地js存放url地址获取图片

Vue如何由本地js中存放的url地址获取图片

2023-09-26 09:22:52 作者：默默的小跟班

这篇文章主要介绍了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="">

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。