<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>
- 发布:2021-01-22 10:46
- 更新:2021-10-09 15:21
- 阅读:3516
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
第三方开发者工具版本号: 1.03.2101150
基础库版本号: 2.14.1
项目创建方式: CLI
CLI版本号: 2.0.0-29820201110001
示例代码:
操作步骤:
<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>
<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的值出现,然后再初始化导致小程序开发工具报错、
在组件中,已经初始化了变量,不应该在渲染的时候会出现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 的值,一个短暂的值,然后接下来会变成正确的渲染之。
[渲染层网络层错误] 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://图片基础路径”;
1 个回复
8***@qq.com
唉,没人解决