vue-cli项目中，css文件background-image设置问题

Dear 丶 2023-07-17 15:33 3阅读 0赞

# 使用绝对路径 #

在vue-cli项目中的放在public目录下的资源会被直接复制，不会经过webpack的打包处理。目录如下  
![在这里插入图片描述][20200322191418547.png]

我们可以在css文件中这么用

#header { 
    	position:relative;
    	height:72px;
    	background:url("/image/logo.png");
    	overflow:hidden;
    }

文件打包生成以后，他访问的是这个地址  
`http://localhost:8080/image/logo.png`

# 相对路径 #

不建议使用相对路径，可能会引起各种问题

#header { 
    	position:relative;
    	height:72px;
    	background:url("../../assets/logo.png");
    	overflow:hidden;
    }

访问项目，图片路径是`http://localhost:8080/img/logo.82b9c7a5.png`

# 使用服务器上面的路径 #

目录结构如下  
![在这里插入图片描述][20200322201026110.png]

我们可以通过less或者sass，访问服务器上面的路径，将绝对路径中修改一下，以便模拟

在common.less里面

/* css 加载图片的路径 调用方式 => url('@{cssHost}doctor-bg.png') 现在为本地地址 */ 
    @cssHost :'http://localhost:8080/image/';

在dashboard.less中

@charset "utf-8";
    @import "../../assets/common.less";
    * { margin:0;padding:0;box-sizing:border-box;}
    .dash { 
    	position:relative;
    	font-family:"Microsoft Yahei", Arial, sans-serif;
        background-image:url("@{cssHost}dashboard/bg.png");
    }

[20200322191418547.png]: /images/20230528/443796bb6f694b668b4d5f6c2b54b4e3.png
[20200322201026110.png]: /images/20230528/96fad4a3fc5b4845a54da78809d78c5c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 VueCli3项目解决打包问题

背景描述：自己之前做了一个vue的小案例，但是从来没有用过npm run build,果真遇到了挺多令人头疼的问题！然后在这里和大家分享一下！项目技术：VueCli3脚手

ゞ浴缸里的玫瑰/ 2023年09月26日 10:01/ 0 赞/ 113 阅读

相关 vue-cli项目中，css文件background-image设置问题

使用绝对路径在vue-cli项目中的放在public目录下的资源会被直接复制，不会经过webpack的打包处理。目录如下 ![在这里插入图片描述][20200322

Dear 丶/ 2023年07月17日 15:33/ 0 赞/ 4 阅读

相关 vuecli项目怎样使用jsx

有时候用jsx写页面可能更灵活，当然在vue中写jsx需要插件的支持我用了一些官方给出的，感觉不怎么好用，推荐安装这个安装babel-plugin-trans

柔情只为你懂/ 2023年06月16日 10:42/ 0 赞/ 44 阅读

相关 7个关于 CSS backgroundImage 好用的技巧

1.背景图如何才能完美适配视口让背景图适配视口很容易，需要使用下面 CSS 即可： body { background-image: url('h

悠悠/ 2023年02月09日 14:28/ 0 赞/ 32 阅读

相关 vuecli脚手架配置文件说明

vuecli脚手架座右铭：越努力越幸运，越运动越健康。热爱计算机技术，热爱运动的这样一个人 -------------------- 文章目录 vuec

快来打我*/ 2022年12月23日 11:29/ 0 赞/ 283 阅读

相关快速部署vuecli3 vuecli搭建 vuecli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2022年12月22日 11:07/ 0 赞/ 351 阅读

相关使用VueCLI脚手架创建项目

\\VueCLI脚手架创建项目安装脚手架 \[VueCLI官网\] (https://cli.vuejs.org/zh/guide/installatio

素颜马尾好姑娘i/ 2022年11月21日 09:58/ 0 赞/ 431 阅读

相关 C#中给Label控件设置BackgroundImage属性

在C\中，默认情况下是无法给Label设置BackgroundImage属性的，只有Image这个属性，但是在某些特殊的情况下我们又需要设置Label的BackgroundIm

阳光穿透心脏的1/2处/ 2021年11月26日 09:48/ 0 赞/ 425 阅读

相关设置窗体背景图片（Windows Form的BackgroundImage属性）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L251bWJl

谁践踏了优雅/ 2021年09月23日 17:22/ 0 赞/ 733 阅读

相关 uni-app设置背景图片，backgroundImage

HTML部分代码 <view class="shangpin_teacher_pic" :style="{backgroundImage: 'url(' + pic_

亦凉/ 2021年08月30日 12:22/ 0 赞/ 1697 阅读