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

执波仔丶2024-01-29 15:02

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

基本是靠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>

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

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