使用vite导入public下面的图片

最新推荐文章于 2024-08-01 16:45:36 发布
最新推荐文章于 2024-08-01 16:45:36 发布
阅读量247 收藏
点赞数 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...
vite创建vue3项目页面引用public下js文件失败解决
夏日漱石的博客
09-13 4545
📢vite创建vue3项目页面引用public下js文件失败解决
关于vite打包后静态资源（图片）不加载的问题
weixin_51080551的博客
06-19 484
关于vite打包后静态资源（图片）不加载的问题
6-vite通过script引入commonjs，public打包后的文件变化
最新发布
qkdgz的博客
08-01 274
Electron+vite+vue3对接海康威视摄像头，实现多摄像头回放，通过iframe嵌入html文件，html文件中使用了script引入的js存在require导致引入失败。或打包后找不到文件
vite的public目录
过客如期的博客
06-09 1万+
1. 目录是存放静态资源的一种方式。2.项目初始化时默认作为静态资源服务的文件夹。我们可以在中修改。3.该目录中的文件开发期间在 处提供，并在构建期间将文件夹下的文件（不包含本身）复制到 的根目录。4.下的文件会被完整复制到目标目录的根目录下，保持原有文件名，不会被。1.在开发时我们可以使用开头直接访问 目录下的资源 2.当项目部署在嵌套的公共路径下，我们需要指定 配置项，由 引入的资源 ， 中的 引用以及 文件中引用的资源在构建过程中都会自动调整，以适配此选项。 上面的资源在构建后会变为 3.当
关于vite的静态资源放置路径与打包问题：到底是放public下还是放assets下
商务合作 / 项目定制开发 / 前端一对一培训、答疑
09-28 1万+
如果图片不需要被处理，比如网站的结构用图，如logo图片，则放`public`中，否则如内容图片或者需要被构建为`base64`的小图标可以放放`assets`中
vite 引入public下css、js、json等文件报错问题的研究
wallace_yang的博客
12-28 8541
vite 引入 public下的js、css、json报错
vite中引入图片的几种方式
blue_121的博客
05-19 9952
该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。请注意： 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子，public/icon.png 应该在源码中被引用为 /icon.png。在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：（相对路径一定要写正确，当前引入图片的文件，相对图片的位置）生产环境，开发环境统统无效。目录会更省事，不管是开发环境还是生产环境，可以始终以根目录保持图片路径的一致。
vite5+vue3+ import.meta.glob动态导入vue组件
03-25
下面是如何使用 `import.meta.glob` 动态导入 Vue 组件的步骤： 1. **设置 glob 路径**：首先，你需要定义一个路径模式，告诉 Vite 哪些文件是你想导入的。这通常是一个相对路径，例如 `./src/components/**/*.vue`...
Vite创建的项目使用elementplus框架
11-17
Vite利用浏览器原生的模块导入功能，在开发时直接对源码进行预编译，减少了构建步骤，提高了开发效率。 【ElementPlus框架】 ElementPlus是基于Vue 3的组件库，它是Element UI的升级版，提供了丰富的UI组件，如...
移动端vue3+vite+vant 框架
07-19
- 使用Vue3和Vite，项目的目录结构通常包含`src`、`public`、`tests`等，其中`src`是主要的源码目录，`public`存放静态资源，`tests`用于编写单元测试。 - Vite的配置文件`vite.config.js`可以定制各种配置，如...
Vite-demo：使用vite工具，初始化vue3.x项目
02-13
- `public`：静态资源目录，用于存放不会被 vite 处理的文件，如图片、字体等。 - `package.json`：项目配置文件，记录了项目依赖、脚本和其他设置。 - `.gitignore`：定义了版本控制系统应忽略的文件。 - `...
vite.config.ts常规配置（publicPath）
热门推荐
shengzz的博客
04-02 1万+
publicPath，base属性，vite配置
vite.config.js主要配置解析
hjh15827475896的博客
05-10 2303
【代码】vite.config.js主要配置解析。
【webpack】和【vite】中获取本地文件夹目录下的所有图片
stay hungry, stay foolish
03-11 1262
webpack 和 vite 中获取本地文件夹目录下的所有图片
vite打包 public文件访问
08-15
vite项目在打包后会将public文件夹下的文件直接放到dist文件夹下，但是如果将文件放到assets文件夹下，则json文件不会被一起打包，导致dist文件夹下没有json文件。对于vite生成的文件存在跨域问题，大多数项目开发都是将文件放在服务器中通过域名去访问，但是特殊情况需要直接访问静态资源，所以需要解决file存在跨域的问题。与webpack相比，webpack打包出的文件同样是file直接访问，但是不存在跨域问题。此外，webpack打包出的文件不带module，但是vite打包会带module。对于vite打包后的文件访问问题，一般情况下是可以正常访问的。如果出现空白页面，可能是因为路由组件没有正确加载。可以尝试将router.js文件中的history模式改为hash，然后重新打包和执行操作来解决该问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vite hash路由模式项目打包上线访问 json 文件方法](https://blog.csdn.net/qq_39111074/article/details/131456008)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vite打包静态文件打开显示空白](https://blog.csdn.net/A_bet_of_three_years/article/details/128809633)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值