vue 背景图片显示不出来

2024-11-09

在Vue项目中，添加的背景图片在服务器上不显示，如何处理

遇到的问题: 在vue项目开发过程中,我们常常会在页面中添加背景图片.可是当我们在样式中添加了背景图片,编译打包部署到服务器上时,发现图片并不能显示出来,这是为什么呢~~~ 我们一般写的css样式如下: background: url("../../assets/logo.png") no-repeat; 问题原因: 因为在编译打包后,图片的路径解析出现了问题. 解决方法: 1.在data中定义如下: export default { name: 'index', data() { r

手机浏览PC版页面出现背景图片显示不全的问题解决方案

手机浏览PC版页面出现背景图片显示不全给定宽高的值

Android启动过程中背景图片显示

转自:http://blog.csdn.net/zhangzhikaixinya/article/details/17001321 大部分Android App启动过程中,都会设置一个背景图片,直到App加载成功,图片消失.因此,这也是做Android App的基本技能之一.这个过程实现起来并不难. 总共需要以下内容:2个Activity,一张背景图,2个xml配置文件,String.xml,AndroidManifest写入配置信息. 1 准备一张背景图图片,命名为load,自己选择图片格式.

微信小程序之三元运算符代替wx:if 来解决背景图片显示隐藏

最近在开发一个小程序项目时,碰到一个问题, 在一个多条件单项选择中,为选中条件添加一个选中状态,选中状态为灰色背景,但是这个背景要用到背景图片大家都知道在小程序中wxss是无法读到本地图标资源,只能使用外部链接和base64, 这俩种方法都不适合我们开发的时候使用, 但是却可以在wxml中使用style="background-image: url(../../images/workingMode/pattern-ac.png);"方法然后通过条件判断来控制是否渲染但是在小程序

vue项目在webpack打包后背景图片显示不了

加上 publicPath:'../../'即可

img只显示图片一部分或 css设置背景图片只显示图片指定区域

17:14 2016/3/22img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置部分代码:<style type="text/css">img {position:abs

IE下背景图片不显示问题

转自:http://www.jb51.net/css/119341.html 在chrome,FF里调试完后,忽然想起ie来,放到Ie里其它还好了,但是有个背景图片显示不出来,具体的写法如下,有类似情况的朋友可以参考下很久木有写点什么了,最后干的活比较杂.除了公司里的事情之外,还写了点别的东西. 刚写一个页面,在chrome,FF里调试完后,忽然想起ie来,放到Ie里其它还好了,但是有个背景图片显示不出来. 调试N遍后,只好上stackoverflow去找一下,果然找到了. 最初是这样写的:

ie8 background背景图片不显示问题

在chrome,FF可以显示,但是在ie8背景图片显示不出来 css改为如下可以正常显示: background: url(../images/goods.png) no-repeat !important;

jquery实现背景图片动态适应

背景在我的一个项目中用到了背景图片,发现其中有一个问题,当页面长度动态变化时,原来能占满全部内容背景的图片会变得不能占满全部背景.如下图的效果: 这是正常的,背景图片占满全屏当页面内容变长出现了滚动条时,背景图片显示出现了问题问题解决下面附上我解决这个问题的代码: js代码: /* * 根据类名获取元素 */ document.getElementsByClassName = function(oParent,sClass){ var aResult = []; var aNode =

设置JFrame背景图片

这里我就放上改写的代码吧,不做多的解释,推荐一个好的博文 https://blog.csdn.net/jdsjlzx/article/details/16831815 public void ini_background() { // 背景图片 ImageIcon background = new ImageIcon( this.getClass().getResource("/img/登录背景.png")); // 把背景图片显示在一个标签里面 JLabel label = new

vue打包后CSS中引用的背景图片不显示问题

vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件修改成为如下所示内容: 添加红框中的内容即可.

Vue项目打包发布后CSS中的背景图片不显示

相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可修改 build/utils.js 中的 generateLoaders 方法,如下代码,增加 publicPath: '…/…/' // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { const

vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现

1. 创建 loading 公用组件 <template> <div class="load-container"> <div class="load"></div> <div class="text">加载中...</div> </div> </template> <script> export default { name: 'Load

VUE2.0 饿了吗视频学习笔记（六）：定位问题、文字显示、模糊背景图片、点击事件

一.定位问题按照视频写代码时,发现元素“5个“”定位不对,如下图正常位置为还以为是哪里写错了,仔细研究了下,需要在父div上加relative. position:relative/absolute的父(祖先)节点的padding-box的区进行定位(忽略文字),找不到符合条件的父(祖先)节点,则相对浏览器窗口进行定位.没有设置了TRBL则默认浮动,默认浮动在父级节点的content-box区. <style lang="stylus" rel="styleshee

Vue项目开发之打包后背景图片路径错误的坑

在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示的,通过网上查询,找到了解决的办法,但是大部分都没有讲造成这种问题的原因,故我简单地总结了一下,并加入了一些自己的理解,欢迎共同探讨~ 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片.

CSS3之让背景图片全部显示

起初是在处理一个图片显示的问题, 图片没有有一部分没有显示出来, 之后用到了background-size, 发现有必要总结一下. background-size 首先声明 background-size是一个css3属性. 翻译过来很容易就知道它是用来规定背景尺寸的. 关于浏览器兼容性 IE9+.Firefox 4+.Opera.Chrome 以及 Safari 5+. 用法 background-size有4个值分别是(length | percentage | cover | co

background: url 背景图片加时间戳不显示图片

在项目中一段这样的代码背景图片加时间戳图片显示不出来 <div id="header" class="header clearfix" style=" background: url(/U_HomeImage/T_CityManage/4_CM_Pic.png?2014-8-4 16:46:51) no-repeat left;background-size: 180px 87px;padding-left: 190px;"> 图片

j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt

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

如何用css背景图片拉伸以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改的. 所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性.就是用来控制背景图片的显示的.所以一般用作背景图片的有2类: 1.是一整张大图,尺寸和区域大小刚好吻合 2.一个很小的条状图,通过repeat后

Js_动画显示背景图片

jAni是一个可以动画显示背景图片的jQuery插件.这个插件基本上是GIF动画的一个替代品,但是他有他的好处.所有浏览器都支持GIF形式的动画格式,而且也不需要额外的javaScript代码和标记.但是不好的一点是,GIF格式的图片只有256色.而且你不能控制图片的显示.这个插件通过载入垂直的GIF帧,然后改变容器的background-postion来显示动画,这样你就可以自由控制了. 特色轻量级的脚本很容易使用可以通过CSS完全定制所有浏览器都支持如何使用 1.下载脚本,并包含j

vue 背景图片显示不出来

热门专题