uni-app NVUE模式下image标签使用绝对定位后图片不显示？

uni-app NVUE模式下image标签使用绝对定位后图片不显示？

示例代码：

非常单纯的写了个image标签然后绝对定位

操作步骤：

使用image标签 然后绝对定位，然后图片就不显示了

预期结果：

使用image标签 然后绝对定位，图片正常显示

实际结果：

使用image标签 然后绝对定位，然后图片就不显示了

bug描述：

image标签 使用绝对定位后图片不显示，image标签宽高已经写了

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 10
HBuilderX类型 正式
HBuilderX版本 3.1.8
手机系统 Android
手机版本号 Android 7.0
手机厂商 模拟器
手机机型 moniqi
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX


更多关于uni-app NVUE模式下image标签使用绝对定位后图片不显示？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

能否有人解答一下呢？虽然我大概已经知道为什么了。但是还是需要官网解答一下

更多关于uni-app NVUE模式下image标签使用绝对定位后图片不显示？的实战教程也可以访问 https://www.itying.com/category-93-b0.html


就没有人解答一下吗

现在显示出来了吗

回复 2104_DLS: 没有显示出来。

回复 2104_DLS: 很好复现的。新建一个nvue页面，放个image标签 然后用绝对定位 这个图片就不显示了

回复 战力不足五: 父元素没有relative,相对于页面最外层标签定位，如果恰好这个标签没有高度，那么在安卓端是默认overflow: hidden;则无法显示。你尝试一下一个空页面写一个有宽高的relative定位的标签，包裹这个img。如果还不能解决请提供一个可以复现的demo。

回复 2104_DLS: weex 安卓默认只支持 overflow: hidden；其实很多场景，就是在不写高度的情况下进行的定位的，因为用定位本身就是不想这个元素占据位置，所有官方没有打算去兼容一下 然安卓支持 overflow:visible。我觉得这个属性是很有必要的

回复 战力不足五: 没有必要，只要你使用flex布局是完全可以做到的。

<image class="margin-bottom-xs" :lazy-load="true" src="https://xxxxxx.png"></image>

图片地址我乱写的

.margin-bottom-xs { width: 96rpx; height: 96rpx; margin-bottom: 10rpx; }

以前我是写在外围的 但是nvue 不支持嵌套标签 无效果 所以内部写了个class 如果不给高度 默认就是你们说的那个“overflow: hidden”

大佬,请问在哪儿给overflow:visible;属性,我父级元素有宽高,子元素也有宽高,将子元素绝对定位到父元素外面,就看不到了,给父元素overflow:visible;也没用呀,这种怎么解决呢

在 uni-app 的 NVUE 模式下，使用 image 标签结合绝对定位时，图片不显示通常是由于布局层级或样式兼容性问题导致的。NVUE 基于 Weex 渲染，其样式支持与 Web 标准存在差异。

常见原因及解决方案：

  1. 父容器未设置定位上下文：绝对定位元素需要父容器设置 position: relative 或 absolute 作为参考基准。请确保 image 的父元素已正确设置定位属性。

  2. 层级覆盖问题：检查是否有其他元素（如背景、视图）覆盖了图片。可通过调整 z-index 属性解决。

  3. 图片路径或资源问题：确认图片路径正确（建议使用绝对路径或 Base64），且资源已成功打包。在 NVUE 中，网络图片需确保域名在白名单内。

  4. 样式兼容性：NVUE 对 CSS 支持有限，避免使用复杂选择器或部分 Web 属性。确保宽高、定位值使用明确单位（如 px）。

示例修正代码：

<template>
  <view class="container">
    <image class="absolute-img" src="/static/example.png"></image>
  </view>
</template>

<style scoped>
.container {
  position: relative; /* 关键：建立定位上下文 */
  width: 750rpx;
  height: 500rpx;
}
.absolute-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
}
</style>
回到顶部