岚枫
岚枫
  • 发布:2021-01-22 10:46
  • 更新:2021-10-09 15:21
  • 阅读:3516

【报Bug】uni-app typescript image 图片路径动态拼接会出现渲染层网络层错误

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

第三方开发者工具版本号: 1.03.2101150

基础库版本号: 2.14.1

项目创建方式: CLI

CLI版本号: 2.0.0-29820201110001

示例代码:
<template>  
    <view>  
      <image  
        :src="imageBaseUrl + goods.iconUrl"  
        class="goods-image"  
        :style="{ height: current.imageHeight }"  
        mode="aspectFit"  
      ></image>  
    </view>  
</template>  

<script lang="ts">  

import { Vue,Component, Prop, Watch } from "vue-property-decorator";  

@Component  
export default class GoodsItem extends Vue{  
  @Prop({ type: Object, default: () => {} })  
  goods: any;  
  imageBaseUrl = “http://图片基础路径”;  
}  
</script>  

操作步骤:
<template>  
    <view>  
      <image  
        :src="imageBaseUrl + ‘实际的图片路径’"  
        class="goods-image"  
        :style="{ height: current.imageHeight }"  
        mode="aspectFit"  
      ></image>  
    </view>  
</template>  

<script lang="ts">  

import { Vue,Component, Prop, Watch } from "vue-property-decorator";  

@Component  
export default class GoodsItem extends Vue{  
  @Prop({ type: Object, default: () => {} })  
  goods: any;  

  imageBaseUrl = “http://图片基础路径”; // 切换成图片实际基础路径,  
}  
</script>  

预期结果:

在组件中,已经初始化了变量,不应该在渲染的时候会出现undefined的值出现,然后再初始化导致小程序开发工具报错、

实际结果:

[渲染层网络层错误] Failed to load local image resource /pages/index/components/undefined/uimage/zht/kyjz/information/inf_210115170138851407.jpeg
the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)

其中的undefined 就是imageBaseUrl 的值,一个短暂的值,然后接下来会变成正确的渲染之。

bug描述:

image 图片url动态拼接时候报错如下:
[渲染层网络层错误] Failed to load local image resource /pages/index/components/undefined/uimage/zht/kyjz/information/inf_210115170138851407.jpeg
the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)

      <image  
        :src="imageBaseUrl + goods.model.iconUrl1"  
        class="goods-image"  
        :style="{ height: current.imageHeight }"  
        mode="aspectFit"  
      ></image>

需要给变量imageBaseUrl 加上v-if判断条件就不报错

      <image  
        v-if="imageBaseUrl"  
        :src="imageBaseUrl+ goods.model.iconUrl1"  
        class="goods-image"  
        :style="{ height: current.imageHeight }"  
        mode="aspectFit"  
      ></image>

但是imageBaseUrl是直接在定义变量时候已经初始化了值,理论上不应该出现undefined的中间值,图片渲染了2次,一次是undefined,一次正确渲染的值,undefined导致会出现渲染层网络层错误错误

  imageBaseUrl = “http://图片基础路径”;
2021-01-22 10:46 负责人:无 分享
已邀请:
8***@qq.com

8***@qq.com

唉,没人解决

该问题目前已经被锁定, 无法添加新回复