zx_flk_app/pages/message/detail.vue

<template>
	<view class="container">
		<navBar name="信息详情"></navBar>
		<view class="title">{{info.title}}</view>
		<view >{{info.overview}}</view>
		<image v-if="info.cover" :src="info.cover" class="img" mode="aspectFill" />
		<rich-text :nodes="info.content"></rich-text>
	</view>
</template>

<script>
	const config = require('@/common/config.js');
	const http = require('@/common/http.js');
	const request = require('@/common/request.js');
	const common = require('@/common/common.js');
	export default {
		data() {
			return {
				id: '',
				info: {}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.queryMsgDetail()
		},
		methods: {
			queryMsgDetail() {
				const req = { type:'PLAT',id : Number(this.id) }
				http.postApi(config.API_MESSAGE_DTL, req, res => {
					if (res.succeed) {
						this.info = res.data.data
						// 正则匹配所有<img>标签并插入自适应属性
						this.info.content  = (this.info.content || '') .replace(/<img/g, '<img style="max-width: 100%; height: auto;"');
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		
		.title{
			font-size: 36rpx;
			font-weight: bold;
			margin: 20rpx;
		}
		
		.img{
			width: 750rpx;
		}
	}
</style>