<template>
<view class="page">
<view class="image-list">
<view class="image-item" v-for="(item,index) in array" :key="index">
<view class="image-content">
<image :style="'width: ' + ( item.width ? '750rpx' : '200px') + '; height: 200px;'" :mode="item.mode" :src="src"
@error="imageError" @load="imageLoad(item)"></image>
</view>
<view class="image-title">{{item.text}}</view>
</view>
</view>
</view>
</template>
<script>
var video
export default {
data() {
return {
array: [{
mode: 'scaleToFill',
text: 'scaleToFill:不保持纵横比缩放图片,使图片完全适应'
}, {
mode: 'aspectFit',
text: 'aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来'
}, {
mode: 'aspectFill',
text: 'aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来'
}, {
mode: 'top',
text: 'top:不缩放图片,只显示图片的顶部区域'
}, {
mode: 'bottom',
text: 'bottom:不缩放图片,只显示图片的底部区域'
}, {
mode: 'center',
text: 'center:不缩放图片,只显示图片的中间区域'
}, {
mode: 'left',
text: 'left:不缩放图片,只显示图片的左边区域'
}, {
mode: 'right',
text: 'right:不缩放图片,只显示图片的右边边区域'
}, {
mode: 'top left',
text: 'top left:不缩放图片,只显示图片的左上边区域'
}, {
mode: 'top right',
text: 'top right:不缩放图片,只显示图片的右上边区域'
}, {
mode: 'bottom left',
text: 'bottom left:不缩放图片,只显示图片的左下边区域'
}, {
mode: 'bottom right',
text: 'bottom right:不缩放图片,只显示图片的右下边区域'
}],
src: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg'
}
},
onLoad() {
video = uni.createVideoContext('video',this)
},
methods: {
imageError: function(e) {
console.error('image发生error事件,携带值为' + e.detail.errMsg)
},
imageLoad(e) {
this.$set(e,'width',true)
}
}
}
</script>
<style>
</style>
- 发布:2020-09-26 09:27
- 更新:2020-10-14 20:35
- 阅读:1647
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 2.8.12
手机系统: iOS
手机系统版本号: iOS 12.4
手机厂商: 苹果
手机机型: 6
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
操作步骤:
预期结果:
image正常显示
image正常显示
实际结果:
image不显示了
image不显示了
bug描述:
新版NUVE页面的image动态设置样式,图片消失. 2.8.11版本没问题
最佳回复
4***@qq.com
没有吧,我这边就是普通的vue页面,image标签图片也显示不出来,但是预览可以。2.8.13和2.9.1alpha都显示不出来
<image class="uploaded-img" :src="item.img" @click="previewImage(item)" />
2020-10-09 14:45