微信公众号制作开发 微信小程序定制开发 网站建设制作 手机app软件开发

您的位置:首页 > 技术观点 > 信息详情

vue 项目中v-html 修改img图片大小 亲测好用

来源:山东鸿软信息科技有限公司  阅读量:480  时间:2023-10-24 09:08
vue项目中,因为详情页面内容是通过富文本编辑器过来的,所以在前端项目中就用到了v-html去渲染传过来的内容,但图片存在不能控制大小的问题,本文就解决如何修改微信小程序中图片大小的问题。

vue项目中,因为详情页面内容是通过富文本编辑器过来的,所以在前端项目中就用到了v-html去渲染传过来的内容,但图片存在不能控制大小的问题,本文就解决如何修改微信小程序中图片大小的问题。


方式一:

将收到的数据经过处理再拿去渲染(本方法相对好用):
this.productInfo.content = this.productInfo.content.replace(/<img/g,"<img style='max-width:100%;height:auto;'");


方式二:
通过css样式去控制调整(不大好使):

::v-deep img{

    width:100%;

}


总结:感觉还是方式一的正则好用,你若有更好的方式方法,欢迎交流。


成为您更加专业的技术合伙人

网站建设 | APP开发 | 产品服务 | 技术观点 | 关于我们      客服电子邮箱:1828087588@qq.com  客服QQ:1828087588、1421667633  电话:151-6502-2080

Copyright © 2016-2024 山东鸿软信息科技有限公司 版权所有 https://www.greatsoft.cn 鲁ICP备16026454号