background-image使用配置别名 alias需要加~

最新推荐文章于 2024-01-31 11:02:28 发布
最新推荐文章于 2024-01-31 11:02:28 发布
阅读量793 收藏 1
点赞数 2
文章标签： alias 别名 scss background
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ton555555/article/details/111477133
版权

在组件内的style里的css，background-image使用别名的时候需要加~,且图片地址不需要加引号

.item_back {
background-image: url(~assets/images/2-1.png);
background-size: 100% 100%;
}

龙拳蜗牛
关注
vue工程项目在style中设置background-image时路径问题
郭宝的博客
06-04 6593
1. 在css外设置background-image时，不能直接使用url，应该使用 <li :style="'background-image:url(require('./../assets/banner_top2.png'))'"></li> 2. 在css中设置background-image时，使用相对路径在webpack打包后出现问题，图片路径到了sta...
使用umiJs搭建前端项目添加背景图片
qq_38783718的博客
02-27 1065
摘要：主要记录了 umiJs 搭建的 React 项目如何插入全局背景。
在style中设置background-image时路径问题
weixin_42395251的博客
09-20 501
css、background-image
【vue开发问题-解决方法】（一）在style中设置background-image时路径问题
anken1536的博客
04-26 4251
vue工程项目在style中设置background-image时路径问题 1. 在css外设置background-image时，不能直接使用url，应该使用 <li :style="'background-image:url(require('./../assets/banner_top2.png'))'"></li> 2. 在css中设置ba...
vue css采用别名引入背景图
slice_93的博客
05-17 804
在vue css中采用别名引入 背景图片，可以在前面加一个波浪号 css 属性中： background: url("~@/assets/xxx.jpg") Webpack 会将以~符号作为前缀的路径视作依赖模块而去解析，这样 @的 alias 配置就能生效了。 ...
【taro+react】taro设置路径别名
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
01-14 1420
1.找到项目根目录config/index.js 2.添加以下内容 const path = require('path') const config = { alias: { '@actions': path.resolve(__dirname, '..', 'src/actions'), '@assets': path.resolve(__dirname, '..', 'src/assets'), '@components': path.resolve(__dirname,
在vite+vue3项目中配置使用css预处理器（less/sass）以及路径别名
jieyucx的博客
06-25 6975
vite已经将这些预处理器的loader内置了，我们不用再像在webpack项目中那样，需要下载和配置一堆相关的loader，我们只需要下载less，sass依赖，就能直接在项目中使用啦如图，下载之后我们在项目中style添加lang属性为less，就可以是用less语法啦运行效果如图：还有一种引入方式，import导入外部文件如图，我们新建一个style文件夹，里面新建一个app.less文件，然后再App.vue中使用import导入即可。
因为使用了webpack设置src别名 引入background背景图片的时候写法
LRQQHM的博客
05-25 214
加上~@ css-loader 处理时看到了 ~ 就知道这是个别名或者 node_modules 模块了，构建时要替换成真实的相对路径。 .swiper-three { background: url('~@/assets/super-1.jpg'); }
配置别名 配置alias
thyme_C的博客
12-07 972
alias g='git alias d='docker' alias k='kubectl'
css-loader中‘~’的作用
weixin_34072857的博客
05-08 1377
当我们使用webpack打包应用程序的时候可以通过alias设置别名的方式避免类似于这种尴尬的局面require('../../path/to/foo')。 如果我们设置了别名@指向src alias: { @: path.resolve(__dirname, 'path/to/src') } 复制代码我们就可以轻松引入src下的文件，假设我们有如下目录src>img>foo....
配置alias（设置别名@）
最新发布
吾娱生活的专栏
01-31 1683
【代码】配置alias（设置别名@）
less处理background简写
事在人为2018的博客
09-06 1429
.bg{ background: url(bg.png) 0 0 / 100% no-repeat; } css中我们这么写，如果在less中这么写"/"会被认为是除号，所以需要转义一下，有下面两种写法 .bg{ background: url(bg.png) 0 0 ~"/" 100% no-repeat; } .bg{ background: url(bg.png) 0 0 esca...
vue踩坑系列——backgroundImage路径问题
热门推荐
有问题可关注公众号：前端研究院 后台输入问题回复
08-08 4万+
项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../这种形式 在打包build的设置路径assetsPublicPath: ‘./‘，然后那些没有转成base64的背景图都失效了，，路径。 处理方法： 使用require引入图片 img标签 &amp;lt;img :src=&quot;require('assets/img/header/sea...
CSS background（背景图片）详解
巧克力很苦的小博客
02-12 1万+
“在前端开发过程中，为了页面的美观，往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景？本章就给大家介绍css怎样设置背景图片。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。” css怎样设置背景图片? css background属性就是专门设置背景的属性，可以设置背景色，也可以设置背景图片。 background-image:url() 引入背景图...
两种图片引用的方式background-image和img的区别
一起的远方的博客
03-14 1万+
1. 是否占位 background-image是背景图片，是css的一个样式，不占位； &lt;img /&gt;是一个块状元素，它是一个图片，是html的一个标签，占位； 2. 是否可操作 （1）background-image是只能看的，只能设置如下属性： background-position: 为每一个背景图片设置初始位置。 这个位置是相对于由 background-origin定义...
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
11-26
接下来，我们需要在项目的配置文件 `webpack.base.conf.js` 中设置 jQuery 映射，以便在 Vue 组件中可以直接使用 `$` 符号。找到 webpack 配置文件中的 `resolve` 部分，添加如下代码： ```javascript resolve: { ...
alias--设置别名
sun_x_t的专栏
03-06 1022
alias - 设置命令的别名，让 Linux 命令更简练 用途说明 设置命令的别名。在linux系统中如果命令太长又不符合用户的习惯，那么我们可以为它指定一个别名。 虽然可以为命令建立“链接”解决长文件名的问题，但对于带命令行参数的命令，链接就无能为力了。而 指定别名则可以解决此类所有问题。常用别名来简化ssh登录,使长命令变短，使常用的长命令行 变短，强制执行命令时询问等。
1s学会如何在css、html中使用alias相对路径
weixin_34232363的博客
01-31 931
什么是alias 顾名思义，alias，即别名，当我们在用 webpack处理打包时，可将某一目录配置一个别名，代码中就能使用与别名的相对路径引用资源。 举个栗子 有些同学在js中引用某个文件时，可能会用到相对路径import tool from '../../utils/tool.js' ，这样即不直观，有时写好多../也容易出错。如果我们配置了alias，就可以直接通过import tool ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值