vue scss后缀文件background-image路径错误的解决

更新时间：2022年12月07日 14:25:42 作者：门前大桥下www

这篇文章主要介绍了vue scss后缀文件background-image路径错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

scss后缀文件background-image路径错误

问题

scss文件下，图片路径报错

解决办法

路径前添加 ~

.empty {
  background-image: url("~@imgs/empty.png");
}

@import "../style/lines.scss" 导致background: url()路径无效

解决方案是在webpack 中的vue.config.js中配置

configureWebpack: config => {
    let obj = {};
    obj.resolve = {
      alias: {
        'img': '@/assets/img',
      }
    };
    return obj
}

然后在lines.scss中如下使用

.L-arrows{
            width: 10px;
            height: 19px;
            background: url("~img/arrows.png") no-repeat center;
            background-size: cover;
            overflow: hidden;
            margin: 0px 10px 0px 20px;
}

方法二：

<div class="test_img"></div>
 
<style scoped lang="scss">
$img:"../assets/img";
@import "./style/test.scss";
</style>

在 test.scss中代码如下

.test_img{
    width: 100%;
    height: 200px;
    background: url('#{$img}/alipay.png') no-repeat center;
    background-size: cover;
}

总结

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

您可能感兴趣的文章:

vue使用swiper.js重叠轮播组建样式
这篇文章主要为大家详细介绍了vue使用swiper.js重叠轮播组建样式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
vue中render函数的使用详解
这篇文章主要介绍了vue中render函数的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
Vue+NodeJS实现大文件上传的示例代码
常见的文件上传方式可能就是new一个FormData，把文件append进去以后post给后端就可以了。但如果采用这种方式来上传大文件就很容易产生上传超时的问题。所以本文将利用Vue+NodeJS实现大文件上传，需要的可以参考一下
2022-05-05
vue3配置代理实现axios请求本地接口返回PG库数据
这篇文章主要为大家详细介绍了vue3配置代理实现axios请求本地接口返回PG库数据的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
2025-03-03
Vue自定义Hook实现简化本地存储
这篇文章主要为大家详细介绍了如何通过使用 Vue 3 的 Composition API 创建一个强大而灵活的自定义 Hook,简化了在 localStorage 或 sessionStorage 中管理数据的流程,需要的可以参考下
2023-12-12
Vue如何基于vue-i18n实现多国语言兼容
这篇文章主要介绍了Vue如何基于vue-i18n实现多国语言兼容,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
Vue项目中quill-editor带样式编辑器的使用方法
这篇文章主要介绍了Vue项目中quill-editor带样式编辑器的使用方法，可以更改插入图片和视频，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
vue element-ui导航实现全屏/取消全屏功能
这篇文章主要介绍了vue element-ui导航实现全屏/取消全屏功能,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
简易Vue评论框架的实现(父组件的实现)
本篇文章主要介绍了简易 Vue 评论框架的实现(父组件的实现)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
基于iview的router常用控制方式
这篇文章主要介绍了基于iview的router常用控制方式,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05