uni-app image组件使用动态图片时遇302重定向导致图片无法显示

uni-app image组件使用动态图片时遇302重定向导致图片无法显示

开发环境 版本号 项目创建方式
Mac 10.14.6 HBuilderX
HBuilderX 3.1.2

示例代码：

<image  src="https://ac01bt.img.file.ehaoyao.com/pub/item/defDirectory/00/w/aXRlbS9jaGFubmVsLzI1LzUxMGYwMGJhMmUxMTQ1YWZiNDRhMmE0YmY1M2RjNjk1LnBuZw==/p/center/89a9deb79b504e26b223bd6121339114_small.JPG">
</image>

操作步骤：

1

预期结果：

1

实际结果：

1

bug描述：

image组件的src图片是302重定向图片时候，会造成图片不显示，下面是例子

<image  src="https://ac01bt.img.file.ehaoyao.com/pub/item/defDirectory/00/w/aXRlbS9jaGFubmVsLzI1LzUxMGYwMGJhMmUxMTQ1YWZiNDRhMmE0YmY1M2RjNjk1LnBuZw==/p/center/89a9deb79b504e26b223bd6121339114_small.JPG">
</image>

更多关于uni-app image组件使用动态图片时遇302重定向导致图片无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

直接测试未复现问题，有啥要特别注意的细节吗？

更多关于uni-app image组件使用动态图片时遇302重定向导致图片无法显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


从A页面 跳到B页面 B页面放图片 就会出现。 如果直接进B页面 复现不了

回复 270315475: 按你说的条件测试仍然未复现，你直接补充完整的测试示例和步骤

这是一个常见的302重定向图片加载问题。在uni-app中，image组件默认不支持自动跟随302重定向获取图片资源。以下是解决方案：

  1. 服务端方案（推荐）：
  • 让后端直接返回最终图片URL，避免302跳转
  • 或者后端返回重定向后的最终URL给前端使用
  1. 前端处理方案：
  • 使用uni.request先获取图片URL：
uni.request({
  url: '原302图片URL',
  method: 'HEAD', // 使用HEAD方法只获取响应头
  success(res) {
    if(res.statusCode === 302) {
      this.imageUrl = res.header.Location // 获取重定向后的URL
    }
  }
})
  1. 在模板中使用处理后的URL：
<image :src="imageUrl"></image>
回到顶部