一、需求

接口返回的数据中既包含文字也包含图片，并且需要对图片进行处理（设置最大宽度为100%并拼接域名）

可以按照以下步骤进行操作：

二、代码

<template><div class="details"><div class="infos" v-html="renderContent(newsDetail.content)"></div></div>
</template><script>export default {data() {return {newsDetail: '',}},mounted() {this.initFun()},methods: {//1.获取到详情数据initFun() {var that = this;this.$api.POST(this.$face.newsInfo, {id: that.id}, function(res) {that.newsDetail = res.data.data;});},//2.处理包含文字和图片的字段，并拼接图片的 URL 前缀或域名renderContent(content) {const imageUrlPrefix = 'http://123.57.92.166/';const regex = /<img.*?src="(.*?)".*?>/g;return content.replace(regex, (match, imageUrl) => {const fullImageUrl = imageUrlPrefix + imageUrl;return `<img src="${fullImageUrl}" style="max-width: 100%;">`;});},},}
</script>

完成~