vue style属性设置背景图片的相对路径无效的解决

更新时间：2023年10月13日 16:50:13 作者：南为爱编程

这篇文章主要介绍了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，则会变成全局，而不是当前组件

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

使用Webpack 搭建 Vue3 开发环境过程详解
这篇文章主要介绍了使用Webpack 搭建 Vue3 开发环境过程详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
使用vue-virtual-scroller遇到的问题及解决
这篇文章主要介绍了使用vue-virtual-scroller遇到的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
VUE 动态组件的应用案例分析
这篇文章主要介绍了VUE 动态组件的应用,结合具体案例形式分析了vue.js动态组件的应用场景、解决方案及相关操作技巧,需要的朋友可以参考下
2019-12-12
element 表格嵌套表单验证指定行的操作方法
这篇文章主要介绍了element 表格嵌套表单验证指定行的操作方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-07-07
Vite3迁移Webpack5的实现
本文主要介绍了Vite3迁移Webpack5的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
Vue3中使用监听器的具体实践
监听器是Vue3中非常好用的一个特性,用于监听某个响应式变量的变化,本文就来介绍一下Vue3中使用监听器的具体实践,具有一定的参考价值,感兴趣的可以了解一下
2023-12-12
vue arco.design锚点Anchor使用方式
这篇文章主要介绍了vue arco.design锚点Anchor使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
Vue全局事件总线$bus安装与应用小结
这篇文章主要介绍了Vue全局事件总线$bus安装与应用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-09-09
Element 默认勾选表格 toggleRowSelection的实现
这篇文章主要介绍了Element 默认勾选表格 toggleRowSelection的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
关于vue中watch检测到不到对象属性的变化的解决方法
本篇文章主要介绍了关于vue中watch检测到不到对象属性的变化的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02