vant icon等需要组件使用本地图片时图片不显示的解决办法。

最新推荐文章于 2023-05-25 23:56:17 发布
最新推荐文章于 2023-05-25 23:56:17 发布
阅读量3.3k 收藏 1
点赞数
文章标签： vant vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45807026/article/details/122321272
版权

请添加图片描述

地址明明没有错，但是图片失效

请添加图片描述检查时提示无法载入图片，这样只需要通过require引入就能解决问题
在这里插入图片描述
在这里插入图片描述

valives
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vant-image本地图片无法显示
01-07
坑： 正常情况下都是这样写的，但是vant这个框架不知道怎么想的，居然加载不出来，花里胡哨。文档也没有写怎么加载本地图片，到处挖坑。如图： 加载失败 解决办法： src属性绑定requeir（）方法 :src=require('../assets/logo.png') 完美解决： 加载失败 //script(vue) data() { return { //图片资源 imgList: [ require(“../assets/icon_emeetnote_nor.png”),
van-icon自定义图标的引入
liangzg
04-22 2270
van-icon自定义图标的引入1.打开iconfont官网2.将需要引入的图标添加入库3.将已经入库的图标添加至项目（如果还没有项目需要创建）4.复制代码在浏览器打开5.将内容全部复制6.在本地应用中新建css文件，并把内容拷入，把css文件引入到mian.j中7. 页面van-icon中使用 1.打开iconfont官网 https://www.iconfont.cn/ 2.将需要引入的图标添加入库 3.将已经入库的图标添加至项目（如果还没有项目需要创建） 4.复制代码在浏览器打开 5.将内容全部
【vant】爬坑引用本地图片
易小花的博客
08-06 2889
[vant]爬坑image 最近因为项目需求要利用vant引用本地图片，但是我发现，我死活引用不上本地图片，老是找不到图片，试了n多方法，我真的是欲哭无泪啊。然后我又查了很多文档，发现还是木有用。简直了，一遇到调用图片的，我真的是瑟瑟发抖，害怕。 话不多说了，进入正题。 一开始我是这么写的，对于路径问题，嗯，遵循不报找不到的错就好，至于原理，我还真没深究过。 <div class="boximg"> <img src="../assets/hahaha.png"> </div
vue+vant使用图片预览功能ImagePreview的问题解决
11-20
如果您搜到这篇文章的话，那员外估计您遇到跟我一样的问题了，即在打开图片预览功能后，如果不关闭预览的图片，同时改变路由的话，会发现即使路由改变了，预览的图片还在文档的最顶层显示，如图：      着实让员外百思不其解，在调用vant 的 ImagePreview图片预览组件中，没有html，有的只是引入ImagePreview 和js的调用。在这种情况下，员外是想自己添加任何方法都没法实现的，同时想在离开路由时的beforeRouteLeave 钩子中关闭这个 ImagePreview  也实现不了，因为根本就拿他没有一点办法。同时可以看到，这个图片预览的 html 是挂载在 window 上面
在vant 中使用cell组件 定义图标该图片和位置操作
01-18
@本来想直接使用icon组件，使用阿里的图标库，可是怎么弄也不行，折腾一下午，最后决定使用最笨的办法，直接上代码 vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样 <!--../../assets/tou.png--> <!----> <van-cell value=未完成 lab
vant上传文件组建Uploader中upload-icon使用本地图片
weixin_37810758的博客
05-12 2470
//引入想要使用的图片 import uploadIcon from '@/assets/imgs/upload-icon.png' 然后就可以用这张图啦 <van-uploader :after-read="afterRead" :upload-icon="uploadIcon"/>
vant Grid组件图片加载问题 无法加载本地图片解决方案
m0_62876802的博客
07-22 1337
我们引入图片直接用官网给的icon来加载案图片。然后我们图片地址得用require包一下。
VUE--vant 中调用本地图片
norang的博客
06-18 1380
https://vant-contrib.gitee.io/vant/#/zh-CN/image#ru-he-yin-yong-ben-di-tu-pian
H5网页的Vant的Icon图标显示不出来
坐等夕阳落time的博客
12-14 6265
因为vue环境没弄好
关于Vue/Vant组件引入本地图片
xyjjk的博客
09-22 1537
第一次用Vant组件，引入图片直接用路径但无法读取图片，后面改为"require"包裹路径就成功了
vant 自定义 van-dropdown-item的用法
10-15
主要介绍了vant 自定义 van-dropdown-item的用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
主要介绍了vue vantUI tab切换时 list组件不触发load事件的解决办法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vant安装和使用
热门推荐
webFront的博客
05-11 7万+
Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城，用 Vant 就再合适不过了。中文文档链接：https://www.youzanyun.com/zanui/vant#/...
vant-icon替换本图片
qq_34183451的博客
08-13 731
vant-icon较少，需根据ui提供的图片进行展示； 相关修改如下：
uniapp引入vant-weapp时van-icon不能展示
qq_42510572的博客
01-04 2024
在uniapp 3.1.22版本引入当前日期最新的vant-weapp1.10版本时发现van-icon出现图标不能展示的问题。 解决方案：在/wxcomponents/vant/dist/icon/index.wxss里寻找url字符，在括号内url地址添加"https:",重新运行项目即可。 ...
UI设计中图标设计规范是什么
weixin_51686423的博客
10-26 1016
　　图标是UI设计中的点睛之笔，更是赋予了UI设计灵魂。很多小伙伴留言说不会做图标设计，所以今天胡老师今天谈谈图标设计。 　　图标是 UI 设计中必不可少的组成。通常我们理解图标设计的含义，是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。在我们的企业级应用设计范围中，图标在界面设计的诸多元素中往往只占了很小的比重，在调用时也会被缩到比设计稿小很多倍的尺寸，加上在图形素材极度丰富并且便于获取的今天，在产品设计体系中实现一套美观、一致、易用、便于延展的图标体系往往会被不小心忽略掉。
vant图标怎么显示不出来_部分自定义图标和自带图标Icon无法同时显示
weixin_35964787的博客
12-23 1880
比如试图同时显示fontawesome的heart图标和自带alipay图标@font-facefont-family: 'custom-iconfont-solid'src: url('./fonts/Font Awesome 5 Free-Solid-900.otf') format('opentype')@font-facefont-family: 'custom-iconfont-regu...
Vue： van-image使用本地图片报错404
qq_41425646的博客
05-25 454
van-image引用本地图片
node-v12.22.1-linux-x64.tar.xz
最新发布
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
使用vant组件 和官网的样式不一致怎么解决
05-10
如果使用 vant 组件库时，发现组件样式与官网展示的不一致，可以考虑以下几种解决方式： 1. 确认版本：首先确认自己使用的 vant 版本是否正确，可以通过升级或降级版本尝试解决问题。 2. 检查引用：检查是否正确引用了 vant 样式文件，在 HTML 页面或入口文件中引入 vant 样式文件： ``` import 'vant/lib/index.css'; ``` 或者在 HTML 页面中直接引入： ``` <link rel="stylesheet" href="//unpkg.com/vant/lib/vant-css/index.css"> ``` 3. 自定义主题：vant 提供了自定义主题的功能，可以通过修改主题色等参数，来定制组件的样式。具体操作可以参考官方文档：[自定义主题](https://vant-contrib.gitee.io/vant/#/zh-CN/theme)。 4. 覆盖样式：如果以上方法都无法解决问题，可以考虑通过覆盖样式来解决。可以在自己的 CSS 文件中针对具体组件的样式进行覆盖。 例如，针对 vant Button 组件的样式进行覆盖，可以这样写： ``` .van-button { font-size: 16px; color: #333; background: #fff; } ``` 希望以上方法能对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值