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">

预期结果:

imageimg效果应该一致

实际结果:

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


好的我来试试

回到顶部