Uniapp verwendet eine V-HTML-Aufrufschnittstelle, Rich-Text-Bilder und eine adaptive Videogröße

Wenn das Frontend die Hintergrunddaten erhält und diese nicht verarbeitet, treten folgende Probleme auf: Bilder und Videos werden außerhalb der Ansicht nicht vollständig angezeigt.

bewältigen

//info 是富文本
<view v-if='info' v-html='replaceWhite(info)'></view>

Rufen Sie die folgende Methode auf

replaceWhite(html) {
    
     // 处理富文本默认图片，视频大小
			let newContent = html.replace(/<video[^>]*>/gi, function(match, capture) {
    
    
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			}).replace(/<img[^>]*>/gi, function(match, capture) {
    
    
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
    
    
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
					'max-width:100%;');
				return match;
			});
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/\<video/gi,
				'<video style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"').replace(/\<img/gi,
				'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			return newContent;
		},

Referenzchef

Wenn Sie der Meinung sind, dass der Artikel gut ist, denken Sie daran, ihm einen Daumen nach oben zu geben, ihm zu folgen und ihn zu Ihren Favoriten hinzuzufügen. Bitte korrigieren Sie mich, wenn es Fehler gibt. Wenn Sie ihn erneut drucken müssen, geben Sie bitte die Quelle an. Vielen Dank! ! !