taro 小程序 CoverImage Image src无法显示图片的问题

目录

一、问题描述

二、解决方案


一、问题描述

使用taro开发的微信小程序图片无法正常显示,并报如下错误:

渲染层网络层错误\] Failed to load local image resource /assets/icon/message.png the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)

此时的代码如下:

javascript 复制代码
      <CoverView>
        <CoverImage src={"/assets/icon/home.png"}/>
      </CoverView>

可以看到,我直接采用了web项目的相对路径写法,直接写路径是有问题的。

二、解决方案

经过查阅资料,了解到小程序项目里图片的src只能是以下两种类型的方式使用:

1、网络在线图片地址;

2、而本地图片,并且在项目中引入以后,

将上面的代码改成正确的方式如下:

javascript 复制代码
import "@/assets/icon/home.png";

......

    <CoverView>
        <CoverImage src={"/assets/icon/home.png"}/>
      </CoverView>

这样在项目中引入以后就OK了!的确是一个比较坑的点。

相关推荐
DsirNg19 分钟前
Vue 3:我在真实项目中如何用事件委托
前端·javascript·vue.js
克喵的水银蛇19 分钟前
Flutter 适配实战:屏幕适配 + 暗黑模式 + 多语言
前端·javascript·flutter
冬男zdn23 分钟前
Next.js 16 + next-intl App Router 国际化实现指南
javascript·typescript·reactjs
有意义41 分钟前
this 不是你想的 this:从作用域迷失到调用栈掌控
javascript·面试·ecmascript 6
否子戈1 小时前
做中国人自己的视频编辑UI框架,WebCut正式开源
前端框架·音视频开发·视频编码
风止何安啊1 小时前
别被 JS 骗了!终极指南:JS 类型转换真相大揭秘
前端·javascript·面试
chaffererdog1 小时前
uniapp开发微信小程序使用vk-uview-ui的uSearch搜索组件,在微信开发者工具中点击输入框会意外触发custom事件
微信小程序·小程序·uni-app
拉不动的猪1 小时前
深入理解 Vue keep-alive:缓存本质、触发条件与生命周期对比
前端·javascript·vue.js
over6971 小时前
深入理解 JavaScript 原型链与继承机制:从 instanceof 到多种继承模式
前端·javascript·面试
烂不烂问厨房1 小时前
前端实现docx与pdf预览
前端·javascript·pdf