vue项目使用background-image设置背景图报错的解决

已于 2022-02-17 14:07:10 修改
阅读量5.5k 收藏 8
点赞数 14
文章标签： vue.js javascript 前端
于 2022-02-17 14:06:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bbt953/article/details/122982072
版权 
background-image: url("@/assets/images/loginbg.png");
// 会报图片路径不对的错误,因为vue2.5及以下版本这种写法没问题;vue2.6及以上版本,用的是webpack4.0就会导致这种错误，需要换一种写法:
background-image: url("~@/assets/images/loginbg.png");
// 带~的路径会被webpack解析为require(src/assets/images/loginbg.png)
湛海不过深蓝
关注
  • 14
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
vue项目中使用vue-i18n报错的解决方法
12-09
前言 Vue-i18n大家应该都不陌生，Vue-i18n安装的安装方法如下： npm install vue-i18n --save 然而最近在vue项目中使用vue-i18n的时候，居然报错了，通过查找相关的资料终于找到了解决的方法，下面话不多说了，来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地，添加路由的时候，稍不注意就会遇到以下情况： Value of key ‘xxx’ is not string! Cannot translate the value of keypath ‘xxx’. Use the value of keypath as defa
vue在css中使用@路径报错问题
zhufan2333的博客
10-12 2428
vue.config.js配置@不对style部分的css生效。css loader 会把把非根路径的url解释为。， 加~前缀才会解释成模块路径（~@代表根路径）。
Vue 关于如何使用 background-image 属性（真的很详细）
最新发布
(黎子)人生编码
06-25 2573
属性用于设置元素的背景图像。它可以接受一个或多个图像的 URL，以及相关的背景定位、重复、大小和附着方式等属性。
vue引入背景图片报错 * ./@/assets/404_images/hs.jpg in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-
tutodelinglimgho的博客
02-23 1336
vue引入背景图片报错 * ./@/assets/404_images/hs.jpg in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref-
Vue2.0background-image不显示的解决方法
weixin_52479225的博客
08-28 2468
vue2.0背景图片引入路径没问题但浏览器找不到
vite5 build模式下scss 路径引入图片不存在的问题解析
黄彪博客
05-16 385
下，样式使用绝对路径，不使用别名都能正常显示图片资源，但是在build打包之后,使用路径别名 @， vite 在打包的时候会将路径转换。的写法图片显示不出来。
vue的style绑定background-image url 写法 简单易懂
IT13333的博客
06-29 3815
vue的style绑定background-image url 写法
vue踩坑--background-image路径问题
weixin_59907064的博客
09-20 1万+
项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../../这种形式。在项目打包build设置路径assetsPublicPath:'./'，然后哪些没有转成base64的背景图都失效了
Vue项目中background-image属性设置方法
热门推荐
彭世瑜的博客
04-07 2万+
vue项目中background-image属性设置方法 方式一：直接访问 在vue-cli项目中的放在public目录下的资源会被直接复制，不会经过webpack的打包处理。 <span class="item-icon"></span> <style> .item-icon { width: 20px; height: 20px; background-size: 20px 20px; vertical-align: middle; /* 放置
vue项目中加入图片和背景图：img、background-image
m0_72822997的博客
02-21 3646
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/qq_49097495/article/details/131622042。/*以下两种路径方式都可以*/二、img直接引入图片。第一种方式：推荐使用。
【未完美解决】vue引入图片相对路径的问题（img、background-image:url()）
程序边界
04-23 6260
文章目录一、问题二、解决1.引入2.使用(1)template中(2)script中(3)style中 一、问题 我们在组件中引入图片的方式一般常用两种： img标签引入，图片路径写到src属性中； 其他标签引入，图片路径写到style属性：background-image:url()中，或是 静态路径 放到css中; 二、解决 1.引入 一般来说，通过require('图片相对路径')可以解决绝大部分问题： 引入图片变量： import bgImg from '../assets/img.png
vue的style绑定background-image的方式和其他变量数据的区别详解
10-18
今天小编就为大家分享一篇vue的style绑定background-image的方式和其他变量数据的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Vue2.0中使用less给元素添加背景图片出现的问题
11-30
在Vue 2.0项目中，使用Less进行样式编写时，可能会遇到给元素添加背景图片时出现的问题。本文将详细解析这个问题的成因，并提供正确的解决方案。 首先，我们需要理解Less是一种预处理器，它允许我们使用变量、嵌套...
使用Vue-cli 中为单独页面设置背景图片铺满全屏
10-15
主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
安装vue-cli报错 -4058 的解决方法
08-29
主要介绍了安装vue-cli报错 -4058 的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue项目中设置背景图片方法
08-28
Vue 项目中设置背景图片方法 在 Vue 项目中，设置背景图片是一件非常常见的事情。然而，在项目开发中，我们经常会遇到背景图片无法正确显示的问题。这个问题的出现主要是由于路径解析的问题，当我们在样式中添加了...
vue引入图片路径的三种主要方法
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-16 2万+
1、在js代码里面 或者 html里面用"v-bind:"或":属性名"绑定路径的时候使用2、在css或者scss或者html里面的src中引入图片使用（注意如果是:src=后面用第1种方式引入路径）3、正常引入静态图片路径情况一，在html里面的用下面代码情况二，在scss里面的background-image:url(路径)用下面的，注意static前面多了/
VUE:背景图片 background-image平铺
m0_64393334的博客
04-24 1844
VUE:背景图片background-image平铺。
vue模版使用background-image
08-25
在Vue模板中使用背景图片（background-image），可以通过以下步骤实现： 1. 在Vue组件的样式中设置背景图，可以使用内联样式或者引入CSS文件来实现。以下是两种方法的示例： a) 使用内联样式： ```vue <template> <div class="container"> <!-- 其他内容 --> </div> </template> <style> .container { background-image: url('/path/to/your/image.jpg'); /* 其他样式 */ } </style> ``` b) 引入CSS文件： ```vue <template> <div class="container"> <!-- 其他内容 --> </div> </template> <style src="./your-style-file.css" scoped></style> ``` 2. 如果需要动态设置背景图，可以使用Vue的数据绑定语法。例如，通过绑定一个变量来动态设置背景图的URL： ```vue <template> <div :style="{ backgroundImage: `url(${imageUrl})` }" class="container"> <!-- 其他内容 --> </div> </template> <script> export default { data() { return { imageUrl: '/path/to/your/image.jpg' }; } } </script> <style> .container { /* 其他样式 */ } </style> ``` 以上就是在Vue模板中使用背景图片的方法。你可以根据自己的需求选择其中一种方式来实现。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值