1.图片路径拼接
- 上代码
定义一个工具函数
import { baseURL } from '../utils/request' // 访问路径
/**
* 获取文件服务访问路径
* @param avatar
* @param subStr
* @returns {*}
*/
export function getFileAccessHttpUrl(avatar, subStr) {
if (!subStr) subStr = 'http'
try {
if (avatar && avatar.startsWith(subStr)) {
return avatar;
} else {
if (avatar && avatar.length > 0 && avatar.indexOf('[') == -1) {
return baseURL +"/sys/common/static" + "/" + avatar;
// /sys/common/static 这个是访问服务器的全路径拼接
// baseURL 设置的url地址
// avatar 服务器返回的图片名或者地址(不是全路径的地址)
}
}
} catch (err) {
return;
}
}
在使用的地方引入函数
import { getFileAccessHttpUrl } from "@/tool/picture"; // 图片拼接函数
简单使用方法
<template>
<div>
<img :src="srcCarousel(picture)">
</div>
</template>
import { getFileAccessHttpUrl } from "@/tool/picture"; // 图片拼接函数
export default {
name: "",
components: {},
data() {
return {
picture:"temp/201_1667209037513.png" // 图片地址
}
}
methods: {
/**
* 拼接图片地址
*/
srcCarousel(picture) {
return getFileAccessHttpUrl(picture); // 参数是上面调用函数返回的图片地址
},
}
}
2.过滤富文本编辑器为自己想要的内容
/**
* 富文本过滤器
*/
textFilter(htmlStr) {
return htmlStr.replace(/<\/?.+?\/?>|\r|\n|\s*/g, ""); // 匹配掉所有的html标签
},
textFilter(htmlStr) {
return htmlStr.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/g); // 匹配掉所有的样式
},
textFilter(htmlStr) {
return htmlStr.replace(/class\s*?=\s*?([‘"])[\s\S]*?\1/g); // 匹配掉所有的类名
},
textFilter(htmlStr) {
return htmlStr.replace(/\r|\n|\s/g,''); // 匹配掉字符串内所有的空格
},
textFilter(htmlStr) {
return htmlStr.replace(/^\s*|\s*$/g,''); // 去掉字符串内两头的空格
},
textFilter(htmlStr) {
return htmlStr.replace(/^\s*/,''); // 去除字符串内左侧的空格
},
textFilter(htmlStr) {
return htmlStr.replace(/(\s*$)/g,''); // 去除字符串内右侧的空格
},