uni-app的image组件发白,使用原生img没有问题
uni-app的image组件发白,使用原生img没有问题
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Mac | Sonoma 14.3 | HBuilderX |
产品分类:uniapp/H5
PC开发环境操作系统:Mac
HBuilderX类型:正式
HBuilderX版本号:4.24
浏览器平台:Chrome
浏览器版本:127.0.6533.101
示例代码:
<template>
<view class="overlay blur">
<image src="https://p2.music.126.net/SRSzJNkVegFlCJVc49VvxQ==/109951163069324876.jpg?param=1024y1024"
class="overlay-img"></image>
</view>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.overlay {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
.overlay::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #00000060;
backdrop-filter: blur(20px);
}
.overlay-img {
width: 150%;
height: 150%;
filter: blur(80px) contrast(1.2);
}
</style>
操作步骤:
将image
标签改为img
标签,代码如下
<img src="https://p2.music.126.net/SRSzJNkVegFlCJVc49VvxQ==/109951163069324876.jpg?param=1024y1024"
class="overlay-img">
预期结果:
image
与img
效果应该一致
实际结果:
image
相较于img
发白
bug描述:
同样的代码,我使用原生img
和使用uniapp的image
展示的效果不一样。
更多关于uni-app的image组件发白,使用原生img没有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
image在转成成img时,会增加一些优化,
你这个问题应该是因为宽高的问题,你那百分之150,好像是没生效,image是会有一个默认的宽高
更多关于uni-app的image组件发白,使用原生img没有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
好的我来试试