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，则会变成全局，而不是当前组件

总结

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

您可能感兴趣的文章:

仿ElementUI实现一个Form表单的实现代码
这篇文章主要介绍了仿ElementUI实现一个Form表单的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue-dplayer 视频播放器实例代码
今天小编就为大家分享一篇vue-dplayer 视频播放器实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
解决vue下载后台传过来的乱码流的问题
这篇文章主要介绍了解决vue下载后台传过来的乱码流的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-12-12
详解Vue3的七种组件通信方式
本篇文章将详解介绍Vue3中如下七种组件通信方式：props、emit、v-model、refs、provide/inject、eventBus、vuex/pinia(状态管理工具)。感兴趣的可以了解一下
2022-02-02
详解Vue-cli来构建Vue项目的步骤
这篇文章主要为大家介绍了Vue-cli来构建Vue项目的步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
vue中__ob__: Observer的踩坑记录
这篇文章主要介绍了vue中__ob__: Observer的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue中使用vue-pdf组件实现文件预览及相应报错解决
在需求中,经常遇见pdf的在线预览效果,很多pdf插件不支持vue3,或者是没有集成翻页放大缩小功能,比如vue-pdf,下面这篇文章主要给大家介绍了关于vue中使用vue-pdf组件实现文件预览及相应报错解决的相关资料,需要的朋友可以参考下
2022-09-09
Vant Weapp组件picker选择器初始默认选中问题
这篇文章主要介绍了Vant Weapp组件picker选择器初始默认选中问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue中el-table两个表尾合计行联动同步滚动条实例代码
项目开发中遇到一个比较两个form差异的需求,但当item过多就需要滚动条,下面这篇文章主要给大家介绍了关于vue中el-table两个表尾合计行联动同步滚动条的相关资料,需要的朋友可以参考下
2022-05-05
vue3使用拖拽组件draggable.next的保姆级教程
做项目的时候遇到了一个需求,拖拽按钮到指定位置，添加一个输入框,这篇文章主要给大家介绍了关于vue3使用拖拽组件draggable.next的保姆级教程,需要的朋友可以参考下
2023-06-06