一、需求

接口返回的数据中既包含文字也包含图片，并且需要对图片进行处理（设置最大宽度为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>

完成~