vue2.x background:url()的踩坑记录
更新时间：2022年04月20日 15:32:02 作者：WF帆少
这篇文章主要介绍了vue2.x background:url()的踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
background:url()的踩坑记录
开发模式下vue中background: url(‘../../assets/img/xxxxx’)直接写在行间样式不生效，即不能直接在标签中style属性中写，
必须写在非行间样式才会生效。
如果要写在行间样式中，需要对资源进行导入，比如ES规范的import或者CommomJS规范的require
backgroundImage路径问题
项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../这种形式
在打包build的设置路径assetsPublicPath: ‘./‘，然后那些没有转成base64的背景图都失效了，，路径。
处理方法
使用require引入图片
img标签
<img :src="require('assets/img/header/search.png')">背景图
<div :style="{backgroundImage:'url('+require('assets/img/common/bg.png')+')'}"></div>
<span :style="{backgroundImage:'url('+require('../../assets/image/accounts/dayily.png')+')'}">
</span>也可以下面这种方式去写：
在前端开发中，background-image属性非常常见，有很多时候需要使用内联样式来绑定此属性，但是在vue-cli项目中，如果如下面代码填写路径会找不到图片
使用require()方法，require()是node.js方法
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue性能优化的方法，文中讲解非常细致，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-07-07
本文主要介绍了vue-video-player 播放m3u8视频流的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
vue elementui table编辑表单时弹框增加编辑明细数据的实现
在Vue项目中,通过使用Element UI框架实现表单及其明细数据的新增和编辑操作,主要通过弹窗形式进行明细数据的增加和编辑,有效提升用户交互体验,本文详细介绍了相关实现方法和代码,适合需要在Vue项目中处理复杂表单交互的开发者参考2024-10-10
element-ui是一个比较完善的UI库,但是使用它需要有一点vue的基础，下面这篇文章主要给大家介绍了关于在vue 2.0项目中如何引入element-ui的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-09-09
在项目开发中，我们经常会遇到表单保存的功能，本文主要介绍了v-for中动态校验el-form表单项的实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧<BR>2022-05-05
这篇文章主要介绍了vue如何给组件动态绑定不同的事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
在Vue3中使用provide和inject进行依赖注入的代码详解
在现代前端开发中,Vue.js已经成为了非常流行的框架之一,它提供了极大的灵活性和可维护性,今天我们要探讨的是Vue 3中的provide和inject功能,这是一种用于在组件树中进行依赖注入的方法,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了Vue2.0 vue-source jsonp 跨域请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
本文主要介绍了vue实现页面div盒子拖拽排序功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
安装@vue/cli报错npmERR gyp ERR问题及解决
这篇文章主要介绍了安装@vue/cli报错npmERR gyp ERR问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论