微信小程序 图片自适应高度 宽度 完美适配原生或者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>