uniapp 编译到微信小程序 image组件绑定显示问题

分类：uni-app

uniapp [已解决]

使用如下代码绑定https链接，触发@load但是无法正常显示图片

        <image  
          :src="imageUrl"  
          @tap="previewImage(imageUrl)"  
          @error="handleImageError"  
          @load="handleImageLoad"  
        />

@load中打印的信息如下

currentTarget:  
dataset: {}  
id: ""  
offsetLeft: 0  
offsetTop: 0  
__proto__: Object  
detail: {width: 680, height: 680}  
mark: {}  
mut: false  
preventDefault: ƒ NOOP()  
stopImmediatePropagation: ƒ NOOP()  
stopPropagation: ƒ NOOP()  
target: {id: "", offsetLeft: 0, offsetTop: 0, dataset: {…}, width: 680, …}  
timeStamp: 4503  
type: "load"  
__evName: "load"  
_userTap: false  
__proto__: Object

同时还打印了绑定的url，链接可以正常访问拿到图片。
不只是在小程序中，编译到浏览器也无法显示

2025-04-27 10:29 负责人:无分享

3 个回复

爱豆豆 - 办法总比困难多

你的图片链接可以发一下吗？我来试试

8***@qq.com (作者)

刚刚解决掉了，我刚刚排查其他使用了动态绑定的地方，发现没问题然后想到tailwind了

2025-04-27 10:51

DCloud_UNI_JBB

找了一个https的图片，正常显示了，可以提供一个可复现demo吗？方便排查问题

8***@qq.com (作者)

已经解决掉了，我刚刚排查其他使用了动态绑定的地方，发现没问题然后想到tailwind了

2025-04-27 10:51

8***@qq.com (作者)

解决了，疑似tailwind的问题

      <view  
        v-if="props.user.isImage"  
        class="tw-ml-4 tw-rounded-xl tw-overflow-hidden tw-bg-white message-image-container"  
      >  
        <image  
          v-if="props.user.isImage"  
          :src="imageUrl"  
          mode="aspectFill"  
          class="tw-w-full tw-h-32"  
          style="object-fit: cover;"  
          @tap="previewImage(imageUrl)"  
          @error="handleImageError"  
        />  
      </view>

删掉外层的容器就好了

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

uniapp 编译到微信小程序 image组件绑定显示问题

3 个回复

公告

相关问题

uniapp 编译到微信小程序 image组件绑定显示问题

与内容相关的链接

3 个回复

公告

相关问题