uniapp 实现图片宽度100%，高度自适应的效果

Fri_

已于 2024-08-08 16:58:04 修改

阅读量43

点赞数

文章标签： uni-app 前端 javascript

于 2023-07-06 21:27:53 首次发布

本文链接：https://blog.csdn.net/weixin_51878863/article/details/131585543

版权

<image 
    v-if="record.reportPath"
    :src="record.reportPath"
    class="img"
    :style="'height: ' + imgHeight + 'px'"
    @load="onImgLoad"
    @tap="previewImage(record.reportPath)"
    @error="imageError"
></image>

onImgLoad(e) {
    // 当图片加载完成后，获取图片的原始宽度和高度，并根据宽度计算出高度
    const { width, height } = e.detail;
    const box = document.getElementById("reportImg");
    const boxWidth = parseFloat(window.getComputedStyle(box).width);
    this.imgHeight = (boxWidth * height) / width;
},
previewImage(e) {
    const imgArr = [e];
    // 预览图片
    uni.previewImage({
        urls: imgArr,
        current: 0,
        fail: function (err) {
            console.log(err.errMsg);
        },
    });
},
imageError() {
    this.record.reportPath = "../../static/img/图片加载失败.png";
},