Vue中v-html图片过大导致溢出的问题及解决
更新时间：2023年04月20日 16:09:26 作者：潮汐未见潮落
这篇文章主要介绍了Vue中v-html图片过大导致溢出的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue v-html图片过大导致溢出
问题描述
移动端开发中，经常遇到渲染富文本的需求！但是也会有很多问题，比如遇到 v-html 渲染富文本时图片会溢出，内容里边的图片太大，导致图片把页面撑的比较宽。
找了很多方法没有用！然后自己试了好几种方法！最后通过简单的 一行 css 代码让图片正常显示了
图片太大，把页面变成可以左右滑动，让之前一些样式失效，比如下面的 标头（商品详情） 原来是居中的位置
CSS
<style scoped lang="scss">
::v-deep img{
max-width:100%;
}
</style>通过加上上面的代码，页面的图片就可以正常显示了
可以看到图片 的宽度和高度 进行了等比例的缩小
关于富文本渲染内容图片溢出问题
描述问题场景
前提：最近做的一个项目，包含了PC端和手机端，共用同一组数据库的数据。
导致了，有些富文本内容在PC端录入的图片，在PC端显示正常，而在移动端的显示的图片则会溢出屏幕。
- PC端：
- 移动端：
解决方法
使用深度选择器
/deep/ .content img {
width: 100% !important;
}
/* 或者 */
.content >>> img {
width: 100% !important;
}
使用正则匹配
// 将你要渲染的数据进行字符串正则匹配 this.goods_info.content = res.data.data.goods_info.content.replace(/<img/g,"<img style='max-width:100%;height:auto;'");
然后再渲染出来，就可以正常了：
<div v-html="goods_info.content"></div>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue-infinite-loading2.0 中文文档详解
本篇文章主要介绍了vue-infinite-loading2.0 中文文档详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了Vue中watch与watchEffect的区别详细解读,watch函数与watchEffect函数都是监听器，在写法和用法上有一定区别，是同一功能的两种不同形态，底层都是一样的,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue+springboot用户注销功能,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-05-05
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理,下面这篇文章主要给大家介绍了关于vue调用swiper插件的相关资料,需要的朋友可以参考下2023-04-04
下面小编就为大家分享一篇vue.js 使用axios实现下载功能的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看2018-03-03
这篇文章主要介绍了vue如何解决echarts5.0以上版本插入地图的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要为大家介绍了vue3+ts中ref及reactive如何指定类型的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
Arco Design 作为一款专为 Vue3 打造的企业级 UI 组件库,以其丰富的特性和卓越的性能,成为现代 Web 应用开发者值得关注的选择,这篇文章主要介绍了Vue3 框架Arco Design详解,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了关于Vue 3.0引入百度地图不兼容的解决办法,本文通过实例代码给大家分享解决方法，需要的朋友可以参考下2022-08-08
在现代应用开发中,实时性已成为用户体验的一个重要组成部分,ue 作为一款流行的前端框架,配合 WebSocket,可以轻松构建实时通知系统,在本文中,我们将通过一个简单的示例,使用 Vue 3 的 Composition API（setup 语法糖）来创建一个实时通知系统2024-11-11
最新评论