vue 项目中如何访问本地图片

最新推荐文章于 2024-07-01 15:56:57 发布
最新推荐文章于 2024-07-01 15:56:57 发布
阅读量8.5k 收藏 4
点赞数 2
分类专栏： vue本地文件 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wushang631/article/details/111598210
版权

vue显示本地图片的方法


我也在网上搜过一些方法,但并没有很方便的解决。都是一群小伙子你不讲武德 我只要解决办法却给我看一堆没用的代码块。
其实方法很简单找对办法是关键

首先我们需要在public文件目录里面创建src文件夹把我们图片放进去

在这里插入图片描述

图片放入完后直接页面引用就行


因为public访问默认 / 所以直接在后面拼接路径即可

我太有感觉了
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue项目在线上服务器访问失败原因分析
10-14
主要介绍了vue项目在线上服务器访问失败原因分析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue动态获取本地图片
DongShanYuXiao的博客
03-20 979
最近在复习插槽有关知识的时候，遇到一个问题。我想把本地图片动态的展示到页面上，却实现不了。后来搜索了很多有关这方面的知识，才得到了解决。
vue3引入本地静态资源图片
想好了再写！
07-01 430
说明：import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用。
vue 局域网如何访问本地项目
王也的博客
02-08 773
vue 同局域网访问不到的问题及解决
vue中动态使用本地图片
风如也的博客
05-12 1334
执行后使用动态组件，动态组件中使用了本地图片，那么可以在项目中增加一个图片组件，动态使用本地图片。图片应用场景：如果我们的页面代码是从后端接口返回的，然后使用。中使用图片地址，不能直接使用变量，需要带字符串拼接。，然后图片的地址是动态变化的，在。中动态使用本地图片，使用。
vue 项目中引入图片
weixin_59519449的博客
06-19 4745
引入效果图：背景：恍恍惚惚的整了好长时间，我借助vant-ui组件去实现的这个效果图，空状态自定义组件，这里呢！需要引入图片，考虑到图片的引入，切记，图片不可直接引入，需要间接的1.需要在data 组件当中用require 去导入图片相对应的路径2. 在组件里边动态导入即可!!! 切记一定要记得加冒号哈...
Vue 本地开发访问线上图片问题
dearyang
05-17 1065
问题：线上图片无法访问 解决方法：vue.config.js 设置 devServer proxy 代理 devServer: { open: false, overlay: { warnings: false, errors: true }, proxy: { // 文档: https://cli.vuejs.org/zh/config/#devserver-proxy '/system/upload': { target: `htt.
vue3中引入本地图片
Lucky_girl_wan的博客
03-16 6499
记录下vue3中引入本地图片： 使用require引入，require里面为图片路径，一般用相对路径，注意require不能接收变量作为地址 export default defineComponent({ name: 'test', setup() { const projectStatistics = ref([ { title: '明日项目', icon: require('@/assets/imgs/line-chart1.png'
vue 项目中使用import引用本地图片
m0_49016709的博客
11-03 2916
图片在项目里的存放路径,import 引入之后可以直接作为js的变量使用。奇葩的使用方式，图片需要放在项目里然后被使用。
vue中展示本地图片
reembarkation的博客
07-22 2510
vue项目中，使用本地图片
vue工程中加载本地资源图片
出来和你看月亮
02-23 2836
在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
解决Vue动态加载本地图片问题
10-16
在Vue.js应用中，动态加载本地图片是一种常见的需求，特别是在处理数据量较大的列表或轮播图等场景。本文将详细讲解如何解决Vue中动态加载本地图片的问题，以及两种不同的实现方式。 首先，我们遇到的问题是当尝试...
解决Vue打包后访问图片/图标不显示的问题
10-16
在开发Vue应用的过程中，我们经常会遇到一个问题：当使用`npm run build`命令打包项目后，在线上环境运行时，图片和图标的资源无法正常显示。这个问题主要是由于打包过程中的路径问题导致的。以下将详细介绍如何解决...
Vue项目中跨域问题解决方案
08-27
在开发Vue项目时，我们经常会遇到跨域问题，这主要是由于浏览器的安全策略限制了不同源之间的请求。跨域问题可以通过多种方式解决，本文主要讲解在使用vue-cli搭建的项目中，如何通过更改Header和使用...
vue项目中使用axios上传图片等文件操作
11-27
在Vue项目中，使用axios上传图片等文件是一个常见的需求，特别是在构建交互丰富的Web应用时。axios是一个非常流行的HTTP客户端库，它可以方便地在浏览器和Node.js环境中发起HTTP请求，并且支持Promise API，使得异步...
鹈鹕算法POA-Kmean-Transformer-LSTM组合状态识别分类【含Matlab源码 6749期】.zip
08-02
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Kmeans-Transformer-lstm分类预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Kmeans-Transformer-lstm分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Kmeans-Transformer-lstm分类 4.4.3 灰狼算法GWO/狼群算法WPA优化Kmeans-Transformer-lstm分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Kmeans-Transformer-lstm分类 4.4.5 萤火虫算法FA/差分算法DE优化Kmeans-Transformer-lstm分类 4.4.6 其他优化算法优化Kmeans-Transformer-Lstm分类
三角测量拓扑聚合器TTAO-Kmean-Transformer-BiLSTM负荷预测【含Matlab源码 6686期】.zip
08-02
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Kmeans-Transformer-Bilstm预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Kmeans-Transformer-Bilstm预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Kmeans-Transformer-Bilstm预测 4.4.3 灰狼算法GWO/狼群算法WPA优化Kmeans-Transformer-Bilstm预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Kmeans-Transformer-Bilstm预测 4.4.5 萤火虫算法FA/差分算法DE优化Kmeans-Transformer-Bilstm预测 4.4.6 其他优化算法优化Kmeans-Transformer-Bilstm预测
S9300X-V200R021C00SPC100-MPUE主控版本
最新发布
08-02
S9300X-V200R021C00SPC100-MPUE主控版本，支持S9300X-4/8/12
vue 解除浏览器访问本地图片权限
08-08
4. 最后，在vue项目中，在需要访问本地图片的地方，使用注册的特权URL方案来加载图片。例如，可以使用`<img>`标签的`src`属性来加载图片，或者通过CSS样式来设置背景图片等。 通过以上步骤，可以解除浏览器对访问...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值