vue踩坑之backgroundImage路径问题及解决
更新时间：2022年10月12日 10:23:10 作者：小仙女de成长
这篇文章主要介绍了vue踩坑之backgroundImage路径问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue 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 style中设置background-image时的路径问题
之前用的都是require方法
//常见并且常用的方式
<script>
data(){
return{
list:[
{url:require('../1.jpg')}
{url:require('../2.jpg')}
]
}
}
</script>而我想直接在style上写，不想费劲的去在数据层写了
实际上require这个函数是可以直接在style里面加的与上同理上
代码如下↓
//奇奇怪怪的方式，很少能用到，不过这次我用到了
<template>
<div class="list">
<div v-for="(item,key) in 9" :key="key" class="li">
<div class="inner">
<div :style="'background-image:url('+require('./../assets/examples/'+item+'.jpg')+')'" class="img"></div>
</div>
<!--可以直接在俩加号中间写require('图片路径') -->
</div>
</div>
</template>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了VUE Elemen-ui之穿梭框使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要为大家详细介绍了vue使用SVG实现圆形进度条音乐播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue3常用的API使用简介，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-03-03
这篇文章为大家详细介绍了vue.js中$watch的用法，文中给出了示例代码，相信对大家的理解和学习具有一定的参考借鉴价值，有需要的朋友们可以一起看看吧。2016-10-10
今天小编就为大家分享一篇Vue 使用Props属性实现父子组件的动态传值详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vuejs如何清空表单数据、删除对象中的空属性公共方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
在for循环中生成的元素要加key属性不仅是在Vue框架中是要添加的，在React框架中也是要添加的。但\其实都不是必须的，因为在 Vue和React中不加key是不会报错的，只是会有警告。但是我们在深入了解加key的原因后会明白，若想确保没有隐患的话，元素还是必须要加key属性。2021-05-05
这篇文章主要介绍了详解vue-router和vue-cli以及组件之间的传值,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
Vue是一套用于构建用户界面的渐进式框架。这篇文章主要介绍了Vue.js图片预览插件的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-08-08
由于某些限制，vue2不能检测到某些情况下数组的变动，本文就将具体讲解这两种限制的解决思路2021-06-06
最新评论