vite css图片路径问题

最新推荐文章于 2025-03-14 13:15:12 发布
最新推荐文章于 2025-03-14 13:15:12 发布
阅读量4.6k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Mukae1997/article/details/117423733
版权

目录结构：
在这里插入图片描述
正确background-image url写法：
在这里插入图片描述
错误：
在这里插入图片描述
错误写法导致的错误：
在这里插入图片描述

Mukae1997
关注
Vue3 - vite 引入本地图片方法，页面引入本地静态资源图像详细教程，解决 UI 前端组件库的图片属性无法使用本地图像问题（无论是本地开发还是打包部署，本地图片的路径正常可用）
王二红
09-08 1万+
vue3vite引入使用本地图片，vue3vite如何引入本地资源的图片图像，vite怎么把本地的图片赋值给src图片标签属性，vue3vite使用require引入本地图像报错，vue3vite组件库的组件怎么引入本地图片，vue3vite如何给组件库的图片属性链接本地资源的图像，elementplusantdesignvue组件怎么使用本地资源的静态图片，vue3vite版本引入本地静态图片的方式，vue3+vite引入本地图片，vue3如何加载本地图片等静态资源，引入
vite静态资源处理，处理vite项目中src和url路径问题
WanweI897的博客
08-02 1839
处理vite项目中src和url路径问题
vite 动态路径引入图片资源
weixin_44484471的博客
09-29 1626
动态路径导入图片, 批量处理静态资源, vite新功能使用
Vite图片路径
lsy1162526799的博客
05-17 1584
只需要引入单个图片 <template> <el-image :src="example" :preview-src-list="[example]" :initial-index="0" fit="cover" /> </template> <script>
vue中 background-image:url()路径写法
最新发布
qq_51705474的博客
03-14 518
三、在js写动态路径。
vite中动态加载图片路径
weixin_45837076的博客
01-03 1385
在vue项目中，构建工具使用webpack，想要动态加载图片路径，只要用require()即可，但是如果工具是基于vite的话，vite是直接根据ES Modules的，它是没有require的，那怎么办呢？
vite build打包后图片src路径无法转换问题
zlejan的博客
04-01 7076
关于vite build打包后图片src路径为转换成打包后路径问题 问题描述 今天在做项目的时候发现打包后有些图片找不到的问题。 出现问题的项目代码： 原因分析： 采用了封装的image组件，导致src属性解析成字符串，而不是路径，类似动态地址，所以无法被解析。 解决方法 1.采用标签来引入图片 2 利用import获取打包文件的动态地址 希望能帮助遇到此类问题的小伙伴，本文仅供参考。 ...
vite 中动态引入图片路径
qq_43548590的博客
05-18 4191
vite 中动态引入图片路径 vite 官方默认的配置，打包后会把图片名加上 hash值，但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题，示例如下： 原文地址https://www.jianshu.com/p/038adc6c8ffd 打包后路径： <img src="static/icon/123.jpg"> 实际打包后的图片路径：static/icon/123.hash.jpg 可以尝试以下方法解决： HTM
解决vue项目打包后背景图片路径错误问题
qq_41512822的博客
01-19 1276
今天打包vue项目上线后，发现背景图片未加载出来，其他图片加载正常，那个未加载出来的背景图片是在css文件中引入的，调试时发现图片的路径不对，改了build文件夹下utils.js文件，然后背景图片就能正常加载了。 打开build/utils.js，添加一行代码： publicPath: '../../', 背景图片在生产环境路径错误的原因： 构建后的项目, 都需要读取静态资源，静态资源分为三...
关于Vue背景图打包之后访问路径错误问题的解决
08-28
当图片小于 10KB 时，url-loader 会将其转换为 base64 格式，但是在 CSS 中访问图片路径时，会出现路径错误的问题。 解决这个问题有四种方法： 1. 使用小图片作为背景图片（建议）： 将小于 10KB 的图片作为背景...
详解在vue-cli3.0中自定css、js和图片的打包路径
10-16
在Vue CLI 3.0中定制css、js和图片的打包路径涉及到对Webpack配置的修改和定制。Vue CLI 3.0默认使用Webpack作为其项目打包工具，提供了较为详细的配置选项以适应不同的构建需求。 ### 前言 在开发Vue应用程序时，...
vue 项目打包时样式及背景图片路径找不到的解决方式
10-16
在使用Vue进行项目开发和打包的过程中，常常会遇到样式文件和背景图片路径无法正确引用的问题。这一问题经常出现在Vue项目打包后，尽管文件可以被正确找到，但引用的资源文件，如字体和背景图片等却无法正确加载。这...
vite 实战图片预加载方案
xfy196的博客
12-12 621
前端图片预加载是一种优化用户体验的技术，通过提前加载图片资源，确保用户在需要查看图片时能够快速显示，而不会因为图片加载延迟而导致界面卡顿或空白。
Vue图片路径问题（动态引入：绝对路径、相对路径），require动态路径问题
weixin_45768768的博客
12-28 5万+
Vue 图片动态加载问题，require 导入使用变量问题，Vue打包前后文件夹目录比较
vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题
热门推荐
LoveSummer
07-21 7万+
vite官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上hash值，但是直接通过src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题我们看到实际上我们不希望资源文件被wbpack编译，这点跟webpack是一致的我们的目标静态文件在。......
vue项目打包后css图片路径出错问题
qq_36476095的博客
09-10 757
vue项目打包后css图片路径出错问题 vue项目打包后出现白屏原因：第一种，打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏。第二种：由于把路由模式mode设置成history了，默认是hash,即url地址带有# 第一种，打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏。 解决办法：修改一下config下面的index.js中bulid模块导出的...
vite5 build模式下scss 路径引入图片不存在的问题解析
黄彪博客
05-16 684
下，样式使用绝对路径，不使用别名都能正常显示图片资源，但是在build打包之后,使用路径别名 @， vite 在打包的时候会将路径转换。的写法图片显示不出来。
vite循环动态添加img路径
weixin_44132285的博客
12-11 805
1.用方法调用自动生成可识别的路径 setup() { const getImageUrl = (index) => { return new URL(`../../assets/yjjyTwo/active_${index+1}.png`, import.meta.url).href } const getImageUrls = (name) => { re
vue\vite打包图片打包不进去
03-08
### 解决 Vue 和 Vite 项目中图片无法被打包的问题 在处理 Vue 和 Vite 项目的打包过程中，如果遇到图片路径错误导致浏览器找不到资源的情况，通常是因为构建工具未能正确解析静态资源的相对路径或绝对路径。 #### 配置 `vite.config.ts` 为了确保图片能够被正确加载，可以在 `vite.config.ts` 中调整别名设置以及公共基础 URL： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': '/src', // 设置 @ 别名为 src 文件夹 }, }, base: './' // 如果部署在同一级目录下，则保持默认；如果是子目录，请指定相应的路径 }) ``` 当使用相对导入方式引入图像时，Vite 可能会将其视为模块依赖而非静态资产。因此建议采用如下方法之一来引用本地图片[^1]。 #### 正确引用图片的方式 ##### 方法一：通过 import 导入 对于组件内部使用的图片，推荐利用 ES6 的 `import` 语句提前获取其最终地址： ```javascript <script setup> import logoUrl from '@/assets/logo.png'; </script> <template> <img :src="logoUrl" alt="Logo"> </template> ``` 这种方法可以让 Webpack 或者 Rollup 插件自动处理这些文件，并返回正确的 URL 给模板使用。 ##### 方法二：动态绑定 style 属性中的 background-image 如果你希望以 CSS 背景图的形式展示图片，可以通过计算属性或者函数形式传参给样式对象: ```html <div class="example" :style="{ backgroundImage: `url(${require('@/path/to/image.jpg')})` }"></div> ``` 注意这里的 `require()` 函数调用是为了让 bundler 知道这是一个需要特别对待的请求而不是普通的字符串字面量。 ##### 方法三：将图片放置于 public 文件夹内 另一种简单的方法就是把所有公共资源放在项目的 `public/` 目录里边，这样可以直接按照相对于根路径访问它们而无需经过任何编译过程： ```html <img src="/images/example.png"/> ``` 只要保证实际发布后的服务器结构与此一致即可正常工作。 #### 修改 nginx 配置 (可选) 如果有条件修改 Nginx 配置的话，也可以考虑增加 location 模块映射 `/static` 请求至对应的实际位置，从而简化前端代码里的资源定位逻辑[^3]: ```nginx location /static/ { root /var/www/html/dist; } ``` 以上措施应该可以帮助解决大部分情况下由于路径不当引起的图片丢失现象。当然具体实施还需视个人应用场景灵活变通。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值