使用vite导入public下面的图片

最新推荐文章于 2025-03-10 14:10:09 发布
最新推荐文章于 2025-03-10 14:10:09 发布
阅读量707 收藏
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74545388/article/details/140647335
版权

我在vite.config.ts中配置

想在vue文件中去使用public下的图片,但是显示不出来,在浏览器上看是请求到图片的，但是不知道为什么el-image却显示不出来，但是img却显示出来,终端报错

翻译了一下就是让你把@@/public/xxxxx转为/xxxx 不需要前面的@@/public/，去vite官网找，看到

所以在以后如果在public下的图片可以直接请求,不需要使用@来转了

vite+vue3动态模块化导入并使用pinia
03-25
在"vite+vue3动态模块化导入并使用pinia"的项目中，我们可以通过以下步骤实现动态模块化导入和使用Pinia： 1. **配置Vite**：在`vite.config.js`中，我们需要配置Vue3和Pinia的插件，如`@vitejs/plugin-vue`和`vite...
vite5+vue3+ import.meta.glob动态导入vue组件
03-25
下面是如何使用 `import.meta.glob` 动态导入 Vue 组件的步骤： 1. **设置 glob 路径**：首先，你需要定义一个路径模式，告诉 Vite 哪些文件是你想导入的。这通常是一个相对路径，例如 `./src/components/**/*.vue`...
vue@cli3项目模板怎么使用public目录下的静态文件
10-15
主要介绍了vue@cli3项目模板怎么使用public目录下的静态文件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vite中引入图片的几种方式
热门推荐
blue_121的博客
05-19 1万+
该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。请注意： 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子，public/icon.png 应该在源码中被引用为 /icon.png。在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：（相对路径一定要写正确，当前引入图片的文件，相对图片的位置）生产环境，开发环境统统无效。目录会更省事，不管是开发环境还是生产环境，可以始终以根目录保持图片路径的一致。
vite构建中的图片引入
最新发布
2301_80109945的博客
03-10 336
今天心血来潮说复现一下网上看到的一个tabbar的样式然后就去创建react项目前段时间react官方说了不再使用CRA（Create React App）,转而投入了Vite的怀抱那么我就用vite初始化项目，原本都一切正常，在src里面引入图片但是诡异的事情发生了，无论我怎么引入本地的图片都不行，无法显示，但是引入网络的图片就没问题。
vite 引入public下css、js、json等文件报错问题的研究
wallace_yang的博客
12-28 9613
vite 引入 public下的js、css、json报错
vite创建的项目如何动态的获取图片
m0_60827885的博客
04-03 914
2、return一个newURL().href。第一个参数是你的图片（img）的地址，第二个参数是import.meta.url,路径的问题：就是在函数中第一个参数写了图片的路径，所以在我们定义的数据里就要删了路径就行了。但是使用vite创建的项目，require是无效的。需要通过下面的方法来动态获取图片。函数的参数为你的图片名字。3、将这个函数抽离为公共方法。4、就可以引入后使用了。
vite动态导入图片汇总
我就是我
12-29 927
vite动态导入图片汇总
Vite-demo：使用vite工具，初始化vue3.x项目
02-13
- `public`：静态资源目录，用于存放不会被 vite 处理的文件，如图片、字体等。 - `package.json`：项目配置文件，记录了项目依赖、脚本和其他设置。 - `.gitignore`：定义了版本控制系统应忽略的文件。 - `...
vite 请求public资源
11-06
1. **静态资源导入**：对于JavaScript和CSS文件，可以在`.js` 或 `.vue` 文件中使用 `import` 导入，并且Vite默认就会处理这些资源，它们会被自动地打包并放在正确的目录下。 ```javascript // 引入CSS import './...
使用Vite5和Vue3实现动态导入Vue组件
资源摘要信息:"探讨了如何在使用Vite5作为构建工具、Vue3作为框架的项目中，利用import.meta.glob方法动态导入Vue组件。" Vite是一个现代前端构建工具，以其快速的冷启动、热模块替换（HMR）和按需加载的特性受到...
VitePress-11-静态资源引入- public目录的使用
northcastle的博客
02-06 1971
VitePress 中 public 目录下的静态资源的引入方式以及public目录的特性介绍
vite创建vue3项目页面引用public下js文件失败解决
夏日漱石的博客
09-13 6072
📢vite创建vue3项目页面引用public下js文件失败解决
vue3 + vite引入本地图片
pscool的博客
06-24 6840
/ 打印的是： /src/assets/imgs/cover.png。
vue3+vite如何获取资源文件夹
不起眼小菜菜的博客
08-25 732
步骤很详细，直接上代码……
Vite - public目录的图片也会被处理？(public目录的特点)
qq_40147756的博客
09-13 735
Vite - public目录的图片也会被处理？(public目录的特点)
Vite+Vue+ts 新建项目及简单示例
weixin_45658815的博客
11-07 437
搭建vue3+vite+ts项目，使用DataV生产了一个简单的轮播表并在页面上展示实时时间
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值