返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vuescss后缀文件background-image路径错误的解决
  • 882
分享到

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

vuescss后缀文件background-image路径错误background-image路径 2022-12-08 20:12:51 882人浏览 薄情痞子
摘要

目录sCSS后缀文件background-image路径错误问题解决办法@import "../style/lines.scss" 导致background: u

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;
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vuescss后缀文件background-image路径错误的解决

本文链接: https://lsjlt.com/news/174484.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vuescss后缀文件background-image路径错误的解决
    目录scss后缀文件background-image路径错误问题解决办法@import "../style/lines.scss" 导致background: u...
    99+
    2022-12-08
    vue scss后缀文件 background-image路径错误 background-image路径
  • vue :src文件路径错误怎么解决
    这篇文章主要讲解了“vue :src文件路径错误怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue :src文件路径错误怎么解决”吧!首先先说明下vue-cli的assets和st...
    99+
    2023-07-04
  • mysql配置文件路径错误怎么解决
    要解决MySQL配置文件路径错误,您可以尝试以下几个步骤:1. 检查MySQL配置文件的路径是否正确,通常MySQL的配置文件位于/...
    99+
    2023-09-04
    mysql
  • 解决python路径错误,运行.py文件,找不到路径的问题
    下面就来说说解决方案吧~ import os import sys curPath = os.path.abspath(os.path.dirname(__file__)) ro...
    99+
    2024-04-02
  • 如何解决vue :src 文件路径错误问题
    这篇文章主要介绍了如何解决vue :src 文件路径错误问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。首先先说明下vue-cli的ass...
    99+
    2024-04-02
  • 怎么解决python路径错误,运行.py文件,找不到路径的问题
    这篇文章主要介绍“怎么解决python路径错误,运行.py文件,找不到路径的问题”,在日常操作中,相信很多人在怎么解决python路径错误,运行.py文件,找不到路径的问题问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对...
    99+
    2023-06-09
  • @FeignClient path属性路径前缀带路径变量时报错的解决
    目录@FeignClient path属性路径前缀带路径变量时报错现象源码分析解决办法@FeignClient使用详解@FeignClient标签的常用属性如下1.首先2.编写接口类...
    99+
    2024-04-02
  • 如何解决vue项目打包后提示图片文件路径错误的问题
    这篇文章主要介绍如何解决vue项目打包后提示图片文件路径错误的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!vue项目打包后在production模式下提示图片 ‘404(not...
    99+
    2024-04-02
  • 解决Python下载文件后路径丢失的问题
    python 下载文件后丢失路径的常见原因有: urllib urlretrieve() 函数无路径返回; requests download() 方法路径不存在或无权限。解决方法分别为...
    99+
    2024-04-03
    python 文件路径
  • 解决Jupyter 文件路径的问题
    在使用Jupyter notebook时有这么一句代码 start_frame = imread(“OwnCollection\vehicles\Left\image0001.p...
    99+
    2024-04-02
  • vue-cli项目打包后运行文件路径报错如何解决
    今天小编给大家分享一下vue-cli项目打包后运行文件路径报错如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。问题:刚...
    99+
    2023-07-04
  • Python下载文件后路径丢失的解决方法分享
    使用pathlib模块解决python下载文件后路径丢失问题:创建pathlib的path对象,指定要下载文件的路径。使用requests库下载文件并保存到指定路径。使用path.res...
    99+
    2024-04-04
    python 下载文件
  • 解决spring boot 配置文件后缀的一个坑
    目录spring boot 配置文件后缀的一个坑spring boot配置文件支持 properties和yml从新创建一个demo试试 spring boot 配置文件后缀导致启动...
    99+
    2024-04-02
  • springboot打成jar后无法读取根路径和文件的解决
    目录springboot打成jar后无法读取根路径和文件springboot打jar找不到资源文件springboot打成jar后无法读取根路径和文件 ClassLoader.g...
    99+
    2024-04-02
  • webpack打包后直接访问页面图片路径错误的解决方法
    这篇文章主要为大家展示了“webpack打包后直接访问页面图片路径错误的解决方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“we...
    99+
    2024-04-02
  • 如何解决Vue背景图打包之后访问路径错误的问题
    这篇文章主要介绍如何解决Vue背景图打包之后访问路径错误的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!案例环境通过vue-cli脚手架创建的vue项目在项目打包的时候遇到了背景...
    99+
    2024-04-02
  • 如何解决Jupyter文件路径的问题
    这篇文章给大家分享的是有关如何解决Jupyter文件路径的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在使用Jupyter notebook时有这么一句代码start_frame = i...
    99+
    2023-06-14
  • python-docx文件路径问题的解决方案
    path = "test.docx"以工程下venv文件夹为父目录 补充:Python读取指定目录下指定后缀文件并保存为docx 最近有个奇葩要求 要项目中的N行代码 申请专利啥的...
    99+
    2024-04-02
  • python-docx文件路径问题的如何解决
    本篇内容主要讲解“python-docx文件路径问题的如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“python-docx文件路径问题的如何解决”吧!path = "test....
    99+
    2023-06-09
  • 如何解决vue-cli项目webpack打包后iconfont文件路径的问题
    这篇文章主要介绍了如何解决vue-cli项目webpack打包后iconfont文件路径的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作