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

总结

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

您可能感兴趣的文章:

Vue3 跨域配置devServer的参数和设置方法
这篇文章主要介绍了Vue3 跨域配置devServer的参数和设置,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
vue服务端渲染的实例代码
本篇文章主要介绍了vue服务端渲染的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
使用vue-i18n 入口文件配置控制台报警问题解决
这篇文章主要介绍了使用vue-i18n 入口文件配置控制台报警问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
浅谈基于Vue.js的移动组件库cube-ui
这篇文章主要介绍了基于Vue.js的移动组件库cube-ui，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
Vue实现自定义组件改变组件背景色(示例代码)
要实现 Vue 自定义组件改变组件背景色,你可以通过 props 将背景色作为组件的一个属性传递给组件,在组件内部监听这个属性的变化,并将其应用到组件的样式中,下面通过示例代码介绍Vue如何实现自定义组件改变组件背景色,感兴趣的朋友一起看看吧
2024-03-03
Pinia入门学习之实现简单的用户状态管理
Vue3虽然相对于Vue2很多东西都变了,但是核心的东西还是没有变,比如说状态管理、路由等,再Vue3中尤大神推荐我们使用pinia来实现状态管理,他也说pinia就是Vuex的新版本,这篇文章主要给大家介绍了关于Pinia入门学习之实现简单的用户状态管理的相关资料,需要的朋友可以参考下
2022-11-11
vue调用高德地图实例代码
本篇文章主要介绍了vue调用高德地图实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
electron实现静默打印的示例代码
这篇文章主要介绍了electron实现静默打印的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
vue3中onUnmounted使用详解
在Vue3中,onUnmounted是一个生命周期钩子,它会在组件实例被卸载（unmounted）和销毁之前被调用,本文给大家介绍vue3中onUnmounted使用详解,感兴趣的朋友跟随小编一起看看吧
2024-03-03
深入探讨Vue 3中的组合式函数编程方式
Vue 3中引入了组合式函数编程方式，可以更好地实现代码的复用和可维护性。通过定义可组合的函数，可以将组件的逻辑和状态进行拆分和组合，实现更灵活的代码组织方式。同时，组合式函数也支持响应式数据和生命周期钩子函数，更加贴近Vue开发的实际场景
2023-05-05