vue工程中加载本地资源图片

最新推荐文章于 2024-04-18 08:50:45 发布
最新推荐文章于 2024-04-18 08:50:45 发布
阅读量2.7k 收藏 1
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59142585/article/details/119751121
版权

在vue工程中怎么加载本地图片

1. 静态资源的方式 public文件

创建public文件夹
'/images/a.jpg','/images/b.jpg'

2. reuqire 导入

  	    require("../../assets/images/a.jpg"),
        require("../../assets/images/b.jpg"),
        require("../../assets/images/c.jpg"),

3. import 导入

import a from "../../assets/images/a.jpg",import abfrom "../../assets/images/b.jpg;

 images: [
        // 'https://img01.yzcdn.cn/vant/apple-1.jpg',
        // 'https://img01.yzcdn.cn/vant/apple-2.jpg',

        // ../../assets/images/a.jpg   bug 导入是import 或者 是 require

        // 一  静态资源的方式  public文件
        // '/images/a.jpg','/images/b.jpg'

        //  二   reuqire  导入
        require("../../assets/images/a.jpg"),
        require("../../assets/images/b.jpg"),
        require("../../assets/images/c.jpg"),
        //三  
        // a,b
      ],
出来和你看月亮
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中v-for加载本地静态图片方法
08-27
下面小编就为大家分享一篇vue中v-for加载本地静态图片方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中读取本地图片实现预览和上传
鸭绒的博客
12-03 1万+
先看效果图： 上面展示了两张从本地添加的准备上传服务器的预览图片，效果还不错吧，哈哈哈。 下面是该页面中紫色框的布局与实现代码，我想有些人也不喜欢HTML中默认的上传文件样式，实在辣眼睛： <template> <div class="uploadFile"> <!-- ul、li标签用于展示从本地添加的预览图片 --> <ul v-show="uploadImg.length!=0"> &lt
Vue3如何优雅的加载图片_vue3图片如何加载出来，前端开发经验的有效总结
最新发布
m0_60707708的博客
04-18 445
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
vue 调用图片（服务器和本地）
u011200562的博客
10-26 7288
一、本地（一般调用有三种办法） <script> //方法1.直接将图片引入为模块 require imgUrl from "../assets/test.png" //方法2.将imgUrl放在数据里 data(){ return { imgUrl:require("../assets/test.png") } } //方法3.在生命周期函数中设置 data(){
vue如何动态加载本地图片
m0_49789433的博客
01-25 7881
大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。 以下正 今天遇到一个在vue文件中引入本地图片的问题，于是有了这篇文章。 通常，我们的一个img标签在html中是这么写的： <imgsrc="../images/demo.png"> 这种写法只能引用相对路径下的图片。不能使用绝对路径。使用绝对路径的话，这类资源将会直接被拷贝，而不会经过 webpack 的处理。 如果src是变量的话，我们一般会在data中定一个变量s...
vue获取本地文件夹内所有图片
weixin_44001521的博客
02-23 7429
vue读文件夹图片
vue读取本地图片
weixin_41463944的博客
05-14 3351
<template> <div class="searchbox"> <img :src="images.searchpng" style="height: 500px;"/> </div> </template> <script> export default { data() { return { images: { searchpng:require
【Vue】本地图片展示的六种解决方案
学无止境
06-26 3152
【Vue】本地图片展示的六种解决方案
解决Vue动态加载本地图片问题
10-16
主要介绍了Vue如何动态加载本地图片的相关知识，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue中img src 动态加载本地json的图片路径写法
10-17
主要介绍了vue中的img src 动态加载本地json的图片路径写法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
基于vue 动态加载图片src的解决方法
08-28
下面小编就为大家分享一篇基于vue 动态加载图片src的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 中如何动态加载本地图片资源
weixin_44536001的博客
05-30 4269
在untils文件中加入getImageUrl方法。在需要动态加载的vue文件中引入使用。
vue3：加载本地图片等静态资源
热门推荐
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
02-14 2万+
vue3加载本地资源
vue动态获取本地图片
DongShanYuXiao的博客
03-20 747
最近在复习插槽有关知识的时候，遇到一个问题。我想把本地图片动态的展示到页面上，却实现不了。后来搜索了很多有关这方面的知识，才得到了解决。
在Vue 3中加载本地图片和其他静态资源
码农键盘上的梦
02-23 4989
以上是几种加载本地图片和其他静态资源的方法，根据你的具体需求和项目配置选择适合的方法即可。首先，确保你已经安装了file-loader或url-loader插件。首先，确保你已经安装了file-loader或url-loader插件。如果图片和组件位于同一目录下，可以在模板中直接使用相对路径来引用本地图片和其他静态资源。如果你使用了Webpack等构建工具，也可以使用ES6的。例如，如果图片位于与组件相同的目录下，可以使用。函数将图片作为模块导入，然后在组件中使用它。目录下，然后使用绝对路径来引用它们。
vue在data引入本地图片的两种方法
Ajaxguan的博客
08-22 1万+
第一种 &lt;template&gt; &lt;img :src="imgsrc"&gt; &lt;/template&gt; &lt;script&gt; export default { data () { return { imgsrc: require('../../images/ICON-electronicbilling.png') } }...
vue 项目中如何访问本地图片
wushang631的博客
12-23 8509
vue显示本地图片的方法首先我们需要在public文件目录里面创建src文件夹把我们图片放进去图片放入完后直接页面引用就行 我也在网上搜过一些方法,但并没有很方便的解决。都是一群小伙子你不讲武德 我只要解决办法却给我看一堆没用的代码块。 其实方法很简单找对办法是关键 首先我们需要在public文件目录里面创建src文件夹把我们图片放进去 图片放入完后直接页面引用就行 因为public访问默认 / 所以直接在后面拼接路径即可 ...
vue中使用axios获取本地图片
l10103的博客
04-10 1887
首先，将图片作为静态资源放置在项目的public文件夹中。请注意，上面的示例假定图片位于public/images/example.jpg。如果图片位于不同的目录，请相应地更改路径。
Vue项目引入图片的两种场景和三种方式
weixin_50885665的博客
07-28 6425
public目录Bash。
vue img 加载本地静态图片
06-13
如果你的本地静态图片已经放置在 public 目录下，你可以直接使用相对路径来加载这些图片。例如： ... 本地静态图片"> ...如果你需要在 Vue 组件中加载本地静态图片，请使用相对于组件文件的路径。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值