JavaScript正则表达式替换字符串中图片地址(img src)的方法
获取HTML字符串中img src的地址
a.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
console.log(capture);
});
我这里主要是给图片加一个效果:鼠标放上面变放大镜点击可以放大预览
HTMLStr= HTMLStr.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
'<img src=\'$1\' alt="" style="cursor: zoom-in ">')
如果要替换src的话,把$1参数换成自己要替换的地址
使用图片查看器 v-viewer 即可对图片放大预览,vue引用v-viewer插件
安装
npm install v-viewer --save
vue引用组将,在main.js加入代码
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999
}
})
接下来,只需要将v-viewer指令添加到任意元素即可,该元素下的所有img元素都会被viewer自动处理。
我这里用指令的方式写的,网上还有用组件的方式,~~感觉指令的比较简单
<div class="images" v-viewer="{movable: false}">
<img v-for="src in images" :src="src" :key="src">
</div>