uni-app image图片无法调整大小 mode属性无效 用官网示例代码也不行

uni-app image图片无法调整大小 mode属性无效 用官网示例代码也不行

项目信息 详情
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 3.2.16
浏览器平台 Chrome
浏览器版本 版本 96.0.4664.110（正式版本） （64 位）
项目创建方式 HBuilderX

bug描述：

image无法调整尺寸，直接复制官网代码也不行，mode填充属性也无效

示例代码：

<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: 100px; height: 300px; background-color: #eeeeee;" :mode="item.mode" :src="src"
[@error](/user/error)="imageError"></image>
</view>
<view class="image-title">{{item.text}}</view>
</view>
</view>
</view>
</template> 
<script>
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://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
}
},
methods: {
imageError: function(e) {
console.error('image发生error事件，携带值为' + e.detail.errMsg)
}
}
}
</script> 
<style>
img{
width: 50px;
height: 50px;
}
</style>

操作步骤：

<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: 100px; height: 300px; background-color: #eeeeee;" :mode="item.mode" :src="src"
[@error](/user/error)="imageError"></image>
</view>
<view class="image-title">{{item.text}}</view>
</view>
</view>
</view>
</template> 
<script>
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://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
}
},
methods: {
imageError: function(e) {
console.error('image发生error事件，携带值为' + e.detail.errMsg)
}
}
}
</script> 
<style>
img{
width: 50px;
height: 50px;
}
</style>

更多关于uni-app image图片无法调整大小 mode属性无效 用官网示例代码也不行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

使用image设置大小 而不是img image {
width: 100px;
height: 100px;
}

更多关于uni-app image图片无法调整大小 mode属性无效 用官网示例代码也不行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不起作用

回复 我是大钊: 发代码文件

回复 FullStack: https://uniapp.dcloud.io/component/image?id=image 官网示例，你测试一下

可以设置大小

找到原因了，我修改了index.html文件，造成很多东西都不能用，具体原因不清楚。我恢复了index.html文件，就好了。

问题出在CSS样式上。你的代码在<style>标签中定义了img选择器，这会影响到H5平台下的<image>组件。

在H5平台，uni-app的<image>组件会被编译成HTML的<img>标签。你写的img { width: 50px; height: 50px; }样式会覆盖组件上通过style属性设置的width: 100px; height: 300px;，导致所有图片都被强制设置为50x50像素。

解决方案：

  1. 删除或修改<style>中的img样式规则
  2. 或者给img选择器增加更高的特异性，避免影响image组件

建议直接删除：

/* 删除这部分样式 */
img{
    width: 50px;
    height: 50px;
}
回到顶部