微信小程序开发引用静态资源图片报错解决

最新推荐文章于 2024-07-12 10:43:36 发布
最新推荐文章于 2024-07-12 10:43:36 发布
阅读量1.7k 收藏
点赞数 1
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yancy_peng/article/details/131139233
版权
在微信小程序云开发和vantUI项目中遇到图片引用错误。问题在于使用vantUI的image组件时，相对路径会从vant组件库目录开始查找，而非pages目录。为解决此问题，可以使用返回更多层级的相对路径或直接使用以/images/开头的绝对路径。
摘要由CSDN通过智能技术生成

微信小程序开发引用静态资源图片报错解决

1、问题项目背景

使用微信小程序云开发、vant UI搭建简易项目中引用静态图片报错，引用报错代码及报错信息如下图：

在这里插入图片描述

2、问题原因

  • 如上图中红色方框中，第一种相对路径报错原因

因为image组件是使用的vant组件库中的组件，虽然使用带看pages目录下，但在你使用相对路径时，它仍然会去vant组件库目录下开始找。

在这里插入图片描述

如需使用相对路径方式，可根据项目结构多返回几层，（以我的项目结构来说如下）

在这里插入图片描述

  • 如上图中红色方框中，第二种绝对路径报错原因

绝对路径来说，返回的根目录就是miniprogram目录，因此使用绝对路径只需要直接给/images/XXX.png即可

yancy_peng
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中，实现本地静态图片设置背景图片（非base64）
以夢爲馬的博客
07-04 402
微信小程序要用本地静态图片设置背景图片，官方默认的是要把图片转为base64格式，这种方式不易读，维护性差。可以换一个思路实现用本地图片设置背景图片。
微信小程序设置background-image报错
undefined_404的博客
12-24 655
微信小程序设置 background-img 报错 微信小程序设置背景图片是会报错 提示必须使用网络资源或者 base64 解决办法1 把图片转换为base64格式 （base64图片转换） 把右边生成的base64编码放到url中就可以 ...
【微信小程序开发】图片加载问题解决
最新发布
weixin_43031313的博客
07-12 314
本文描述了微信小程序开发过程中图片无法加载显示的问题，并给出相应的原因和解决方法。
【实战】前端必会 —— 微信小程序引入背景图
程序边界
06-20 7676
wxss中直接引用本地图片会报错： 使用本地图片的话，需要在行内样式中引用 ，外部wxss只能引用线上图片（需要上传服务器后引用）背景图片既可以直接在最外层view使用background，也可以在relative的外层view内使用absolute的image标签（记得宽高设置100%）...
微信小程序不能直接加载本地静态图像作为背景的解决办法
ColdCoder的博客
07-19 1975
微信小程序不能直接加载本地静态图像作为背景的解决办法 1、背景图片设置可以用服务器上的图片。 2、也可以将本地图片转成base64的。 wxml: <view class="title-top flex-row"> <view class="pointsCur flex-col" style="background-image: url({{ bgcImg1}});mode='scaleToFill'"> <text class="p
微信小程序 怎么插入图片？image组件的使用教程。
热门推荐
贼厉害
02-06 2万+
是小程序中一个图片的组件image组件有一个默认宽度和高度（宽300px，高240px）支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0起支持云文件ID。我们先添加一个image组件给他一个边框看看他的默认情况我们从图中可以看出，我什么都没加有一个基础的框框大小（宽300px，高240px）属性类型默认值必填说明最低版本srcstring否图片资源地址1.0.0modestring否图片裁剪、缩放的模式1.0.0webpbooleanfalse否。
uni-app微信小程序image引入图片；background-image背景图引入图片；小程序预览本地图片；小程序图片过大引入报错；获取本地图片的网络地址；
i_am_a_div的博客
07-21 2万+
uni-app小程序图片使用有image标签和background-image背景图两种方式： 下有获取本地图片的网络地址方式：见第四步 一、方式一：使用image标签引入： 1.官方文档说：src 仅支持相对路径、绝对路径，支持 base64 码；但是我使用了网络地址https也可以显示 目前支持以下四种方式引入： <view>引入image的绝对路径src：</view> <image src="~@/static/iconimg/big.png"
微信小程序引入外部矢量图标（阿里巴巴矢量图标）
m0_59971110的博客
02-02 2061
将下载到本地的文件中的iconfont.css拖拽到微信小程序新建的文件夹中。搜索想要的矢量图标并加入购物车，点击右上角购物车。将字体格式设置为TTF Base64。在app.wxss中引入文件。在微信小程序中新建文件夹。将矢量图复制到class中。更改后缀名为wxss。
微信小程序开发图解案例教程-源代码
05-06
微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码...
Python 开发者的微信小程序开发实践.pdf
05-06
10. **持续学习与社区资源**：加入微信小程序开发者社区，参与讨论，获取最新的技术资讯和解决方案，是持续提升技能的重要途径。 通过以上这些知识点的学习和实践，Python开发者可以顺利地参与到微信小程序的开发中...
微信小程序开发-云开发-校园论坛小程序
05-27
该系统使用微信小程序开发工具开发，通过微信小程序自定义的WXML微信标记语言来构建页面的结构，利用微信小程序自定义的样式，语言WXSS编写样式文件来控制页面的样式，使用JavaScript来进行业务处理,实现页面交互...
微信小程序综合商城纯静态模板
12-04
本资源为“微信小程序综合商城纯静态模板”，由八叔引擎之家原创，专为构建电商类小程序设计。该模板旨在帮助开发者快速搭建一个功能完备、界面美观的在线购物平台。 1. **小程序模板**： 小程序模板是预先设计好...
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
m0_63622279的博客
09-09 2616
将这些解压的资源全部拷贝到微信小程序的assets目录中，并且将iconfont.css重命名为iconfont.wxss。首先在当前项目的根目录中，创建assets文件夹，用于存放静态资源，assets里面的文件夹可以自己定义，图片，css…添加一个图标到iconfont项目中，点击生成在线链接，记得选unicode，然后再生成在线链接（待会儿会使用）然后对iconfont.wxss进行编辑修改，将刚刚复制的在线链接，替换掉本地的链接。下载完毕之后，将压缩包解压，会得到类似下面的目录结构。
微信小程序静态页面的实现
LHavoc的博客
10-24 1万+
微信小程序静态页面的实现项目地址（github）前段时间微信出了个小程序，我也学习了一下，自己实现了一个小程序。当然里面都是静态页面，并无数据的操作。要开发小程序就得用微信的开发工具了，它现在不限制用户是否有Appid都可以下载来使用了。先上这个小程序的效果图： 图片不够用就重复的使用了。一、代码的实现1、项目的结构 其中1是放图片的，2中的pages是放页面的相关文件，如js，json,w
微信小程序开发之——import、require和include
我的博客
11-17 7160
一 概述 require：js代码中引用其他js模块代码 include：wxml文件中引用template模板文件 import：既可以在js代码中导入模块代码，又可以在wxml或wxss文件中导入模块文件 二 import和require 2.1 说明 import和require：在js代码文件中导入逻辑代码模块 require 是 AMD规范引入方式 import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法 2.2 使用 import使用示例 import App f
微信小程序-分包，分包预加载
qq_61869009的博客
09-14 1981
微信小程序分包，uiapp小程序分包操作，分包
小程序静态资源及字体图标
sinat_34896766的博客
02-20 536
wxss文件不支持使用本地路径的资源（图片，字体库），必须使用网络资源（以http或https开头）或转换为base64编码使用。c、在项目页面，选则font class按钮，点击下方的网址地址。a、登录iconfont平台，选择自己想要的图标，加入购物车。b、将购物车中的图标加到项目中，若没有，则新建项目即可。app.wxss定义全局样式，该文件中的样式会在所有的页面生效。d、在弹出的新页面，复制所有代码。注：page在每个页面都有，相当于html中的body标签。f、在wxml文件中使用即可。
怎么设置uniapp的静态资源基础路径
07-15
在 UniApp 中，可以通过配置 `staticPath` 来设置静态资源的基础路径。`staticPath` 是一个字符串，表示你希望用作静态资源路径的目录。你可以在 `manifest.json` 文件中进行配置。 下面是设置静态资源基础路径的步骤： 1. 打开项目的 `manifest.json` 文件。 2. 找到 `"uni-app"` 节点，如果没有则手动添加： ```json "uni-app": { // 其他配置... } ``` 3. 在 `"uni-app"` 节点下添加 `"staticPath"` 字段，并设置其值为你希望的静态资源基础路径。例如，如果你希望将静态资源放在 `static` 目录下，可以这样设置： ```json "uni-app": { "staticPath": "/static" } ``` 4. 保存 `manifest.json` 文件。 配置完成后，UniApp 将使用指定的静态资源基础路径来加载静态资源。例如，如果有一个 `image.png` 文件位于 `static` 目录下，你可以在代码中使用 `/static/image.png` 的路径来引用该静态资源。 请注意，设置静态资源基础路径后，需要确保静态资源文件实际存在于指定的路径下。另外，如果你使用了云端部署或者其他特定环境，可能需要进一步调整配置来适应该环境。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值