uniapp显示富文本-CSDN博客

本文链接：https://blog.csdn.net/qq_34631220/article/details/120875885

这是一个关于富文本显示的示例，其中包含了图片宽度处理的代码。在`onLoad`函数中，将所有`<img>`标签设置为宽度100%，用于适应屏幕。示例中展示了商品信息，包括图片、名称、价格、库存和位置，以及商品详情和富文本内容的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<view>
		<view class="dade-image">
			<image src="https://i02piccdn.sogoucdn.com/812e96986d0d60b7"></image>
		</view>
		<view class="dade-ti">
			<view class="dade-padding">虫草面膜亮晶晶</view>
			<view class="dade-padding" style="color: red;">￥200.00</view>
			<view class="dade-display">
				<view>快递</view>
				<view class="dade-text">库存：200</view>
				<view style="position: absolute;right: 19rpx;">广东省 广州市</view>
			</view>
		</view>
		<view class="dade-goodsa">
			<view class="">商品详情</view>
		</view>
		
		<view class="dade-goodsa">
			<rich-text :nodes="strings"></rich-text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				strings:''
			}
		},
		onLoad(){
			var data = '<p style="text-align: center;">333333</p><p><img src="http://dadesc.lcaa.cc:9080/ueditor/php/upload/image/20211020/1634736407861953.png" title="1634736407861953.png" alt="logo.png"/></p>';
            //富文本宽度100%
			data = data.replace(/\<img/g, "<img style='width: 100%;'")
			this.strings = data;
		},
		
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.dade-image image{
		width: 100%;
		height: 640rpx;
	}
	.dade-ti{
		background-color: #ffffff;
		.dade-padding{
			padding: 15rpx 20rpx 15rpx 20rpx;
		}
		.dade-display{
			display: flex;
			padding: 15rpx 20rpx 15rpx 20rpx;
			width: 100%;
			color: #adadad;
			font-size: 29rpx;
			.dade-text{
				width: 69%;
				text-align: center;
			}
		}
	}
	.dade-goodsa{
		margin-top: 20rpx;
		width: 100%;
		background-color: #ffffff;
		padding: 20rpx 0 20rpx 0;
		text-align: center;
	}
	.dade-goodsa img{
		width: 750rpx;
		height: 100%;
	}
</style>

<rich-text :nodes="strings"></rich-text>

<script>
	export default {
		data() {
			return {
				strings:''
			}
		},
		onLoad(){
			var data = '<p style="text-align: center;">333333</p><p><img src="http://dadesc.lcaa.cc:9080/ueditor/php/upload/image/20211020/1634736407861953.png" title="1634736407861953.png" alt="logo.png"/></p>';
			data = data.replace(/\<img/g, "<img style='width: 100%;'")
			this.strings = data;
		},
		
		methods: {
			
		}
	}
</script>