VUE学习——避坑之背景图片路径的添加

最新推荐文章于 2023-11-17 16:46:41 发布
最新推荐文章于 2023-11-17 16:46:41 发布
阅读量1.5k 收藏
点赞数 4
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ainingzetao/article/details/103847496
版权

一般来说咱们添加背景图片，直接使用语句

background: url();

然后添加路径就好，而vue新建一个项目之后，会有一个assets文件夹，里面放着原始vue logo，我一开始误以为所有的图片都是放在aasets文件夹下，然后使用命令：

background: url("../aasets/bg2.jpg");

添加路径，多次尝试，运行发现总是无法实现加载图片，然后我新建了个和src同级的文件夹static,将图片放进去，再次添加路径就可以了！

background: url("../static/bg2.jpg");

后来百度了下static和assets的区别：

使用assets下面的资源，在js中使用的话，路径要经过webpack中的file-loader编译，路径不能直接写。

新手学习，仅供参考！大家一起秃头吖

用户忘记改名
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 项目打包时样式及背景图片路径找不到的解决方式
10-16
今天小编就为大家分享一篇vue 项目打包时样式及背景图片路径找不到的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue打包css文件中背景图片的路径问题
10-18
今天小编就为大家分享一篇解决vue打包css文件中背景图片的路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
scss background: url（）路径无效问题
jack_rose_me的博客
04-08 4600
@import "../style/lines.scss" 导致background: url（）路径无效问题 解决方案是在webpack中的vue.config.js中配置 configureWebpack: config => { let obj = {}; obj.resolve = { alias: { 'img': '@/assets/img', } }; return obj } 然后在lines.scss中...
vue 渲染dom背景图片background url
姚辉乾
01-28 3753
<div class="shopImg" :style="{background:'url('+item.goodimage+')'}"></div>
Vue项目中设置背景图片方法
08-28
下面小编就为大家分享一篇Vue项目中设置背景图片方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目中设置background: url() 是行内样式不生效，样式表是可以的
最新发布
MISS_zhang_0110的博客
11-17 1028
[TOC](vue项目中设置background: url() 是行内样式不生效，样式表是可以的)首先：如果不是项目中普通的一个index.html中是可以的。
Vue通过background:url 引入静态图片失效
从入门到放弃的博客
12-20 1万+
例如 <div :style="{background:'url('+img.url+')',backgroundSize:'100% 100%'}"> ...... </div> ....... img:{ url:'../../assets/bg.png', name: 'bg' } 发现设置背景失败了，图片加载不出来，主要原因是bac...
vue 动态绑定背景图片(background:url)
slow097的博客
11-19 7104
<div :style="{backgroundImage: 'url('+img+'/'+infos.img+')'}"> </div>
如何在vue3中正确的引入background:url
u010782109的博客
10-10 2380
第二加入“~”波浪号。第一必须加上双引号。
Vue2.x background:url()踩坑
WF帆少的博客
07-24 1万+
开发模式下vue中background: url(‘../../assets/img/xxxxx’)直接写在行间样式不生效，即不能直接在标签中style属性中写， 必须写在非行间样式才会生效
vuejs background怎么url进入图片
weixin_40981660的博客
09-30 378
vuejs background怎么url进入图片
vue的style绑定background-image url 写法
腾讯全栈-ITCJF
09-05 1万+
.login-container { background: url(‘~@/assets/login_images/login_background.png’);
Vue安装less 使用 background: url()时报错
HarryHY的博客
10-04 1519
This relative module was not found: This relative module was not found: …/…/…/…/images/Leaderboard/Leaderboardbg.png in ./node_modules/css-loader?{“sourceMap”:true}!./node_modules/vue-loader/lib/styl...
VUE3中SCSS引入背景图片的方式
phplife的电子商务网上商城专栏
04-15 1万+
在VUE3的组件中写样式时会需要用到css的背景图片，这时背景图片怎么引入呢？一般有两种方式： 一、相当路径引： background: url("./../assets/img/test.png") no-repeat; 二、绝对路径 background: url("~@/assets/img/test.png") no-repeat; ...
vue ,background属性的使用
weixin_43703816的博客
04-22 2061
在做一个移动端项目时，需要用加一个圆形的背景， UI给到我图的时候， 我使用了background： url(’ 图片地址’) no-repeat ； 这样的写法 但是，在测试时，发现这个背景的圆，只有一半，另一半消失了。 这是什么情况呢？ 后来才发现 ， background 属性， 是一个简写的形式， background : url(’ 图片地址’) no-repeat center center ; 在最后加上两个 位置 center center ， 就实现了。 ...
Vue.js中的图片引用路径
热门推荐
卜小娴的博客
07-27 3万+
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形：使用一我们在data里面定义好图片路径imgUrl:'../assets/logo.png'然后，在template模板里面/*错误写法*/ <img src="{{imgUrl}}">这样是错误的写法，我们应该用v-bind绑定图片的srcs属性<img :src="imgUrl">或者<img src="../assets/log
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项目中加入图片和背景图：img、background-image
qq_49097495的博客
07-09 9312
*以下两种路径方式都可以*/二、img直接引入图片。第一种方式：推荐使用。
Vue 引入图片的几种方式
weixin_43796856的博客
03-11 4918
引入背景图片错误分析： 使用vue添加背景图片时，刚开始是加在css样式上，然后路径也没错，但是浏览器上会把图片路径转成base64，但是图片大小超过阈值就不转了，直接引入背景图片用在浏览器上时,由于路径解析的问题,图片并不能够正确的显示出来。可以使用以下几种方式 <div style="width:100px;height:100px; backgroundImage:url('../...
vue实现点击div就添加背景图片
06-09
好的，如果你想在 Vue 中实现点击 div 元素时添加背景图片，可以按照以下步骤进行： 1. 在 Vue 模板中创建一个 div 元素，并为其添加 `@click` 事件监听器。 例如： ```html <template> <div class="my-div" @click="addBackground"></div> </template> ``` 2. 在 Vue 实例中定义 `addBackground` 方法，该方法会在点击事件发生时被调用。 例如： ```javascript <script> export default { methods: { addBackground() { // 添加背景图片 } } } </script> ``` 3. 在 `addBackground` 方法中，使用 Vue 的响应式数据来设置该 div 元素的背景图片。 例如： ```javascript <script> export default { data() { return { backgroundImage: null } }, methods: { addBackground() { this.backgroundImage = "url('path/to/image')"; } } } </script> ``` 4. 在该 div 元素上使用 Vue 的 `:style` 绑定来动态设置其背景图片。 例如： ```html <template> <div class="my-div" @click="addBackground" :style="{ backgroundImage: backgroundImage }"></div> </template> ``` 这样，当用户点击该 div 元素时，它的背景图片就会被设置为指定的图片。同时，这种方式也利用了 Vue 的响应式数据机制，确保了数据的更新和视图的同步。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值