背景图片路径找寻失败问题

1、加~

  background-image: url("~@/assets/login/login-bg.png");

  background-size: 100% 100%;

2、加require

<div class="login_content" :style="`background-image: url(${bg_image})`">

bg_image:require("../assets/login/login-bg.png")

背景大小设定：

background-size

background-size: 宽 高 （百分比、长度） | cover 完全覆盖 | contain 宽高自动调节

css 背景图片路径问题的更多相关文章

  1. vue webpack 打包后css背景图路径问题

    最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...

  2. jQuery获取和设置disabled属性、背景图片路径

    之前对于这个独特的disabled属性获取和设置很混乱,今天项目中用到了,用attr不能实现,于是多次试验得出: 获取disabled属性用prop $("#basic_key") ...

  3. div css背景图片不显示

    我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...

  4. css 背景图片自适应元素大小

    一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...

  5. vue项目打包后css背景图路径不对的问题

    问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...

  6. webpack4 前端框架基础配置实例-解决css分离图片路径问题

    1.安装nodejs 2. 需要全局和项目安装webpack和webpack-dev-server npm install webpack webpack-dev-server -g npm inst ...

  7. css背景图片加载失败，页面部分图标无法显示

    1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...

  8. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  9. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

随机推荐

  1. luogu P4206 聪聪和可可

    聪聪和可可 鸽了两天 \(dijkstra\)预处理出来两点之间的最短路径\(dis\)数组,读题发现,\(cat\)的走位很怪sb斩了,所以我们设一个\(next\)数组,\(next[i][j]\ ...

  2. NOIP 模拟 7 回家

    题解 题目 第一眼,板子题,不就是一个缩点吗?后来一想不对,哪有这么傻的出题人呢,出个这水题. 一想,不对,不仅要求割点,还要判断这个割点是否在搜索树 \(n\) 的祖先上.想到这后,我哈哈大笑,还想 ...

  3. 干货！4大实验项目，深度解析Tag在可观测性领域的最佳实践！

    Opentelemetry协议,是CNCF(Cloud Native Computing Foundation-云原生计算基金会)定义的最新一代的可观测规范(目前还在孵化中),该规范定义了可观测性的三 ...

  4. 初识nest.js

    nest的核心概念: Nest的核心概念是提供一种体系结构,它帮助开发人员实现层的最大分离,并在应用程序中增加抽象. 架构预览: 主要有三个核心概念:模块Module,  控制器Controller, ...

  5. jmeter实际场景应用之测试上传excel文件

    日常工作上测试的时候,会有一些场景是导入/上传文件.我们系统多是excel文件,这里就用excel文件为例,详述一下此次测试遇到的坑.最终结果是成功的,请看到最后! 1.获取接口的一些参数信息 先按F ...

  6. MySQL 实例空间使用率过高的原因和解决方法

    用户在使用 MySQL 实例时,会遇到空间使用告警甚至超过实例限额被锁定的情况.在 RDS 控制台的实例基本信息中,即会出现如下信息: 本文将介绍造成空间使用率过高的常见原因及其相应的解决方法.对于M ...

  7. 基于Linux系统的网络服务——高速缓存DNS及企业级域名解析服务

    1.DNS域名系统 DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数 ...

  8. struts2的初步认识

    Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的数据交互. 一. Str ...

  9. Docker下制作一个容器镜像

    操作过程描述: (1)先基于centos的镜像启动一个centos容器 (2)在这个容器中安装nginx (3)然后把这个已经安装了nginx的容器制作成一个docker的镜像 操作:docker c ...

  10. kali linux 的基本命令

    Kali Linux 命令集 系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2)uname -r 显示正在使用的内核版本dmidecode -q 显示硬件系统 ...