uniapp的image组件发白，使用原生img没有问题

分类：uni-app

bug反馈

产品分类： uniapp/H5

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： Sonoma 14.3

HBuilderX类型：正式

HBuilderX版本号： 4.24

浏览器平台： Chrome

浏览器版本： 127.0.6533.101

项目创建方式： HBuilderX

示例代码：

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

预期结果：

image与img效果应该一致

实际结果：

image相较于img发白

bug描述：

同样的代码，我使用原生img和使用uniapp的image展示的效果不一样。
图1：image.png为image标签
图2：img.png为原生img标签

2024-08-17 15:24 负责人:无分享

1 个回复

套马杆的套子 - 没有解决不了的问题，只有解决不完的问题

image在转成成img时，会增加一些优化，
你这个问题应该是因为宽高的问题，你那百分之150，好像是没生效，image是会有一个默认的宽高

yufirem (作者)

好的我来试试

2024-08-19 16:34

要回复问题请先登录或注册

uniapp的image组件发白，使用原生img没有问题

操作步骤：

将image标签改为img标签，代码如下

`<img src="https://p2.music.126.net/SRSzJNkVegFlCJVc49VvxQ==/109951163069324876.jpg?param=1024y1024" class="overlay-img"></img>`

预期结果：

image与img效果应该一致

实际结果：

image相较于img发白

bug描述：

1 个回复

公告

相关问题

uniapp的image组件发白，使用原生img没有问题

操作步骤： 将image标签改为img标签，代码如下 <img src="https://p2.music.126.net/SRSzJNkVegFlCJVc49VvxQ==/109951163069324876.jpg?param=1024y1024" class="overlay-img"></img>

预期结果： image与img效果应该一致

实际结果： image相较于img发白

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

操作步骤：

将image标签改为img标签，代码如下

`<img src="https://p2.music.126.net/SRSzJNkVegFlCJVc49VvxQ==/109951163069324876.jpg?param=1024y1024" class="overlay-img"></img>`

预期结果：

image与img效果应该一致

实际结果：

image相较于img发白