vue css引入图片问题 在style中引入assets的问题

最新推荐文章于 2025-03-27 22:45:57 发布
最新推荐文章于 2025-03-27 22:45:57 发布
阅读量4.4k 收藏 2
点赞数 2
分类专栏： Vue 文章标签： css vue css3 sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43574079/article/details/112816751
版权
本文探讨了在Vue项目中使用SCSS引入图片时遇到的问题，特别是使用绝对路径导致的错误，并给出了通过使用相对路径来解决问题的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

如图，我将我的scss单独用一个文件放到styles中，然后在引入到到页面之中，但是当我用绝对路径引入图片的时候，开始报错，这是为什么呢？

原来用的vue-cli的话，static文件夹下面的代码不会被编译，css里url是什么打包后就还是什么，src下面的assets代码和图片都会做处理的，打包路径要看你配置的assetsRoot，assetsSubDirectory参数。打包之后是没有assets文件夹的,static文件夹不做处理复制过去。

解决方法：使用相对路径

vue css 引入asstes中的图片 无法显示的几种解决方案
nian_cj的博客
03-14 6656
这里主要针对的是vuecli2中的一些问题。 vue项目中，常常会有很多的图片资源，这样的资源存放位置，通常我们有两个选择：1. static，2. assets 关于这两者之间的区别，和如何选择这里就不多说了！ 这里我们来说说assets目录下存放图片时，在vue组件的css样式中引入图片时将会遇到的一些问题！ 正常情况，我们在本地开发调试的时候，无论什么样的方式引入图片都不会有问题。但是，一大...
vue样式 引入图片_vue css 引入asstes中的图片无法显示的四种解决方法
weixin_39986466的博客
12-22 3010
这里主要针对的是vuecli2中的一些问题。vue项目中，常常会有很多的图片资源，这样的资源存放位置，通常我们有两个选择：1. static，2. assets关于这两者之间的区别，和如何选择这里就不多说了！这里我们来说说assets目录下存放图片时，在vue组件的css样式中引入图片时将会遇到的一些问题！正常情况，我们在本地开发调试的时候，无论什么样的方式引入图片都不会有问题。但是，一大包发布打...
vue引用assets里的图片笔记
kekexiaomayi的博客
03-24 751
vue引用assets里的图片笔记
vue3+vite 态引用静态资源，动态引入assets文件夹图片的几种方式
最新发布
qq_44136028的博客
03-27 845
【代码】vue3+vite 态引用静态资源，动态引入assets文件夹图片的几种方式。
vue css 引入asstes中的图片无法显示的四种解决方法
11-21
这里主要针对的是vuecli2中的一些问题。 vue项目中，常常会有很多的图片资源，这样的资源存放位置，通常我们有两个选择：1. static，2. assets 关于这两者之间的区别，和如何选择这里就不多说了！ 这里我们来说说assets目录下存放图片时，在vue组件的css样式中引入图片时将会遇到的一些问题！ 正常情况，我们在本地开发调试的时候，无论什么样的方式引入图片都不会有问题。但是，一大包发布打线上，就会出现图片无法加载的情况！ 这是因为，出于某些原因，有人修改了config目录下的index.js文件中的build对象中assetsPublicPath的值，这个值初始化的时候是 斜
vue assets图片使用
Holly1945的博客
12-01 685
背景图片 background: url("~@/assets/logo.png");
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
01-19
使用vue打包，通过css引用图片资源。...查了一下原因，css引入图片再打包后，style-loader无法设置自己的publicPath，于是我改变了ExtractTextPlugin的css路径publicPath。 if (options.extract) { retur
解决vuejs项目里css引用背景图片不能显示的问题
10-18
在Vue.js项目中，开发过程中可能会遇到CSS引用的背景图片无法正常显示的问题。这通常是由于资源路径不正确或Webpack配置不完善导致的。本篇文章将详细介绍如何解决这一问题。 首先，我们要理解Vue.js项目的文件结构...
关于Vue背景图打包之后访问路径错误问题的解决
08-28
当图片小于 10KB 时，url-loader 会将其转换为 base64 格式，但是在 CSS 中访问图片路径时，会出现路径错误的问题。 解决这个问题有四种方法： 1. 使用小图片作为背景图片（建议）： 将小于 10KB 的图片作为背景...
vue-cli打包css引用图片路径问题
heartcnc的博客
10-18 806
将项目引用绝对路径改为相对路径，修改 build 中 assetsPublicPath ： // config/index.js 'use strict' const path = require('path') const packageJson = require('../package.json') // 构建文件夹 const dir = 'dist/' + packageJson.name module.exports = { dev: { // Paths assetsS
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
Vue中引用assets中的图片的几种方式
Sakura1998gis的博客
12-08 1万+
作为img标签引进来 <img class="img" alt="example" :src="require('./../assets/image/applicationOne.png')"> 作为背景图片引入 <span :style="'background-image:url('+require('./../assets/image/gotoSystemTwo.png')+')'" ></span> ...
vue引入图片
pscool的博客
07-24 2393
vue中引入图片
VUE引入背景图直接使用url(‘@/assets/img...‘)会报错：“This relative module was not found: * ./@/assets/img/“
Sodaxiang的博客
11-26 1925
VUE引入背景图直接使用url('@/assets/img...')会报错："This relative module was not found: * ./@/assets/img/" 场景：直接背景图url('@/assets/img/common/collect.svg')会报错； 解决：在@前面加上~即可。
前端学习之路：解决vue引入assets下图片路径找不到问题
热门推荐
标题有点难
04-03 3万+
<img :src="imgsrc2"> export default{ data(){ imgsrc2: require('../assets/logo4.png') } }
vue 引用src中的文件_VUE中引用路径的配置
weixin_39699670的博客
12-22 2070
在vue项目开发中经常引用JS、CSS、IMG文件。当项目较大时文件层级很多，导致路径很长，我们可以通过在bulid > webpack.base.conf.js 设置简便的引用路径一、引用assets目录下的文件举例：1、在src > components > content > Content.vue 中引用src > assets > img > a...
Vue引入assets中图片未展示的解决方案
adultll的博客
09-05 3184
Vue中批量引入图片时，路径正确但图片未展示，可以使用require函数解决
在 Vue 项目中引用 assets 文件夹中的几种方式
chu396815830的博客
09-23 1944
在 CSS 文件中，可以使用相对路径来引用图片作为背景图像等。文件的模板部分，可以使用相对路径来引用图片。语句来导入图片资源，然后在需要的地方使用。是 Vue CLI 中配置的别名，指向。在 Vue 组件的脚本部分，可以使用。然后在模板中可以使用。
vue样式 引入图片_vue怎么插入图片？
weixin_29522547的博客
12-31 4913
vue怎么插入图片？下面本篇文章给大家介绍一下在vue中插入图片的几种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。vue怎么插入图片？首先给图片地址绑定变量 在script中设置变量//方法1.直接将图片引入为模块require imgUrl from "../assets/test.png"//方法2.将imgUrl放在数据里data(){return {imgU...
vue3 引入图片作为背景
01-18
### 如何在 Vue 3 中引入图片作为元素或页面的背景 #### 使用 CSS 设置背景图片 对于静态资源，可以直接通过相对路径的方式设置背景图片。例如，在样式部分定义如下： ```css background: url("../../assets/img/...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值