在Vue项目中,添加的背景图片在服务器上不显示,如何处理
遇到的问题:
在vue项目开发过程中,我们常常会在页面中添加背景图片。可是当我们在样式中添加了背景图片,编译打包部署到服务器上时,发现图片并不能显示出来,这是为什么呢~~~
我们一般写的css样式如下:
background: url("../../assets/logo.png") no-repeat;
问题原因:
因为在编译打包后,图片的路径解析出现了问题。
解决方法:
1、在data中定义如下:
export default {
name: 'index',
data() {
return {
tips: {
backgroundImage: "url(" + require("../../assets/logo.png") + ")",
backgroundRepeat: "no-repeat",
backgroundSize: "50px 50px"
}
}
}
}
2、通过行内样式引入:
<img class="tips" :style="tips" />
在Vue项目中,添加的背景图片在服务器上不显示,如何处理的更多相关文章
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 在vue项目中添加特殊字体
这里的特殊字体,指的是一般用户电脑未安装到本地的字体,要引入这样的字体,首先需要把字体文件下载下来. 就像上图这样的,ttf格式的,然后在项目里添加它. 然后我们在font.css里用@font-fa ...
- vue项目中添加百度地图功能及解决遇到的问题详解
第一步,在百度地图开放平台 申请密钥 (如果有密钥可以省略此步骤,朋友有也可以借) 地址:http://lbsyun.baidu.com/ 第二步,创建应用并填写表单(下面链接可参考) http:// ...
- vue项目中添加单元测试
从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑,写在这里记录一 ...
- vue项目中打包background背景路径问题
项目中图片都放在src/img文件夹,img和background-image引用都用相对路径,即../../这种形式 在打包build的设置路径assetsPublicPath: ‘./‘,然后那些 ...
- vue项目中,单页图片过多,使用懒加载
最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...
- Vue 项目中添加全局过滤器以及全局混合mixin
可以在.vue文件中定义局部使用的过滤器 export default{ data(){ return [] }, filters:{ toUpperCase:function(value){ ret ...
- 在vue项目中添加一个html页面,开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
- 在Vue项目中使用html2canvas生成页面截图并上传
使用方法 项目中引入 npm install html2canvas html代码 //html代码 <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --> <di ...
随机推荐
- MVC+EF三层+抽象工厂
MVC+EF三层+抽象工厂项目搭建 注意:项目经过两次搭建,所以截图中顶级命名空间有ZHH和ZHH2区别,但是架构的内容是一样的,可以将ZHH和ZHH2视为同一命名空间 一:权限管理 二:搜索 | ...
- mysql5.7 基于gtid的主从复制
基本环境 版本 5.7.14 主库ip:192.168.1.100 port:3306 从库ip:102.168.1.101 port:3306 搭建注意事项 主库配置 gtid-mode=on en ...
- 华南理工大学“三七互娱杯”程序设计竞赛 G: HRY and tree
题意:给出一棵树,定义两点间代价为两点路径上最长的边权,问任两点间的代价和. 解法:这道题的解法十分巧妙:直接用Kruskal对这棵树求最小生成树,然后对于即将加入到MST的这条边(u,v,w),这条 ...
- redis配置篇
配置 Redis的配置信息在/etc/redis/redis.conf下. 查看 sudo vi /etc/redis/redis.conf 核心配置选项 绑定ip:如果需要远程访问,可将此⾏注释,或 ...
- windows10自带的画图软件打出来的字是斜的,怎么解决?
因为字体中带@的字体,方向就是斜的,所以打字时不要用前面带@符号的字体. 用其他字体方向为正常的
- 【转】前后端分离架构:web实现前后端分离,前后端解耦
一.前言 ”前后端分离“已经成为互联网项目开发的业界标杆,通过Tomcat+Ngnix(也可以中间有个Node.js),有效地进行解耦.并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构 ...
- Java高并发网络编程(三)NIO
从Java 1.4开始,Java提供了新的非阻塞IO操作API,用意是替代Java IO和Java Networking相关的API. NIO中有三个核心组件: Buffer缓冲区 Channel通道 ...
- php操作redis--列表篇
常用函数:lpush/rpush/lpop/rpop/lrange/lrem等 应用场景:关注列表,粉丝列表,发送缓冲队列等 特点:可理解为数组操作,插入和删除数据按照一定的规律排序,数据可重复 连接 ...
- FTP的PORT和PASV的连接方式以及数据连接端口号计算
FTP的PORT和PASV的连接方式以及数据连接端口号计算 PORT(自动)方法的连接途中是: 客户端向服务器的FTP端口(原始是21)发送连接请求,服务器领受连接,建立一条command链路. ...
- java-items
类名Items package entity; //商品类 public class Items { private int id; // 商品编号 private String name; // 商 ...