vue style属性设置背景图片的相对路径无效的解决
作者：南为爱编程
这篇文章主要介绍了vue style属性设置背景图片的相对路径无效的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue style设置背景图片的相对路径无效
<div style="background-image: url(./assets/bj.jpeg);"></div>
以上的代码，在style属性中使用了相对路径，在页面元素上的内容d也没有问题。
但是，背景图片依旧没有出来，甚至报错。
很明显是路径有问题，当然了编写的路径肯定是没问题，但是编译后的文件可就不一定了。
那我们想在style属性中设置背景图片怎么办？
解决一、 使用绝对路径
<div style="background-image: url(/src/assets/bj.jpeg);"></div>
解决二、使用Import + 动态style
<template>
<div :style="{backgroundImage: 'url('+ bj +')'}"></div>
</template><script setup> import bj from './assets/bj.jpeg'; console.log(bj); </script>
<style>
div {
width: 100%;
min-height: 500px;
background-color: aqua;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
</style>本质上，它使用的依然是绝对路径：
样式中@设置背景照片无效的原因
1.在项目中，@是我们在vue.config.js中设置的一个路径别名，指定src跟目录，很方便查询文件
2.但是如果在样式中使用@别名时，如果无效，需要在@前面加一个~符合hi可以解决
3.一个单文件组件中，样式如果只是在当前组件使用，则可以写到标注了scoped的区域 <style lang="scss"></style>,如果不加scoped，则会变成全局，而不是当前组件
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。