微信小程序图片自适应高度宽度完美适配原生或者uniapp

 

--

-

-

-

查了一下百度看到网上图片高度自适应的解决方案

基本是靠JS获取图片的宽度进行按比例计算得出图片高度。

不是很符合我的需求/

于是我脑瓜子一转 想到一种新的解决方案 不用JS计算也能完美解决。

我写了一个组件，直接导入可以使用。

-

-

-

1.新建一个组件bl-adaptation-img.vue

2.在main.js中导入

// 自适应图片图片高度 宽度100% import blAdaptationImg from '@/components/baseUI/bl-adaptation-img/index.vue' Vue.component('bl-adaptation-img', blAdaptationImg);

 3.编写组件代码

/** * 微信公众号小程序商城系统! * Copyright © 2024 保留所有权利 * ========================================================= * 版本：V1 * 授权主体：chenfeili * 授权域名：***** * 授权码：******* * ---------------------------------------------- * 您只能在商业授权范围内使用，不可二次转售、分发、分享、传播 * 未经授权任何企业和个人不得对代码以任何目的任何形式的再发布 * ========================================================= */ <template> <bctos-rich-text v-if="nodes" :nodes="nodes"></bctos-rich-text> </template> <script> export default { props: { imgURl: { type: String, default: '' } }, data() { return { nodes: '' } }, watch: { imgURl: { handler(val) { this.nodes = val ? `<img src="${val}" style="max-width:100%;height:auto;"/>` : '' }, immediate: true, deep: true } } } </script> <style lang="scss" scoped> </style>

目前使用的是uniapp的富文本组件bctos-rich-text    如果是原生的小程序可以使用 <rich-text></rich-text>

4.在页面文件中使用

<view v-if="caateInfo.flow_img" class="mt-30 pl-30 pr-30"> <bl-adaptation-img :imgURl="caateInfo.flow_img"></bl-adaptation-img> </view>