<view class="up_img_wrap"> <image src="{{src}}"></image> <icon type="clear" size="23" color="red" > </icon> </view>.up_img_wrap{ width: 90rpx; height: 90rpx; position: relative; } .up_img_wrap image{ width: 100%; height: 100%; border-radius: 15rpx; } .up_img_wrap icon{ position: absolute; top:-22rpx; right: -22rpx; }properties: { src:{ type:String, value:"" } }, 这是自定义图片组件(UpImg)的代码 但运行之后发现还是无法显示图片
时间: 2024-04-12 08:31:33 浏览: 75
根据你提供的代码,在自定义图片组件(UpImg)中,你将`<image>`标签放在了`.up_img_wrap`元素内,可以尝试对`<image>`标签应用样式设置宽度和高度为100%来填充`.up_img_wrap`元素。
请尝试以下修改:
```html
<template>
<view class="up_img_wrap">
<image :src="src" mode="aspectFill"></image>
<icon type="clear" size="23" color="red"></icon>
</view>
</template>
<style>
.up_img_wrap {
width: 90rpx;
height: 90rpx;
position: relative;
}
.up_img_wrap image {
width: 100%;
height: 100%;
border-radius: 15rpx;
}
.up_img_wrap icon {
position: absolute;
top: -22rpx;
right: -22rpx;
}
</style>
<script>
export default {
props: {
src: {
type: String,
default: ""
}
}
};
</script>
```
在上面的代码中,我们修改了模板部分,将`:src`绑定到`<image>`标签上。同时,为了填充`.up_img_wrap`元素,我们将`<image>`标签的宽度和高度都设置为100%。
请确保在使用该自定义图片组件时,正确传递了图片路径给`src`属性。如果问题仍然存在,请提供更多相关的代码片段或说明,以便我能够更好地帮助你解决问题。
阅读全文