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了!的确是一个比较坑的点。

相关推荐
贵沫末3 分钟前
React——基础
前端·react.js·前端框架
说私域19 分钟前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
zhanshuo25 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan25 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
lemonzoey1 小时前
Node.js child_process 核心 API 详解
前端·javascript
linda26181 小时前
本质上,Taro 是一个 跨平台编译框架
前端·taro
lemonzoey1 小时前
pnpm 与 npm 的依赖管理机制深度解析
前端·javascript
lemonzoey1 小时前
PNPM 全局存储机制深度解析
前端·javascript