精华内容
下载资源
问答
  • Vue引入背景图片

    千次阅读 2020-07-30 09:03:28
    :style="backgroundDiv" 在return中 backgroundDiv: { backgroundImage: 'url(' + require('../../static/images/1.png') + ')', backgroundRepeat: 'no-repeat', backgroundSize: '100% 100%' ...
    :style="backgroundDiv"
    

    在return中

    backgroundDiv: {
            backgroundImage: 'url(' + require('../../static/images/1.png') + ')',
            backgroundRepeat: 'no-repeat',
            backgroundSize: '100% 100%'
    
          }
    

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • VUE引入背景图片(图文详情)

    千次阅读 2019-08-04 00:41:59
    VUE引入背景图片 background: url("../../assets/img/my_right.jpg") no-repeat right center; 我的文件夹位置 …/从当前文件出去到了my 再…/是从my出去到了src 所以…/…/assets是src下的assets文件夹 ...

    VUE—引入背景图片

    background: url("../../assets/img/my_right.jpg") no-repeat right center;
    

    我的文件夹位置
    在这里插入图片描述
    …/从当前文件出去到了my
    再…/是从my出去到了src
    所以…/…/assets是src下的assets文件夹

    展开全文
  • 情况1:图片在/public目录下把图片放到与index.html同级的目录下情况1-1.png方式1因为vue编译后会生成index.html,所以我们将图片与index.html放在同一目录下,相当于在index.html中使用引入图片情况2:图片在/src/...

    情况1:图片在/public目录下

    把图片放到与index.html同级的目录下

    0ceb3ed2fd34

    情况1-1.png

    方式1

    因为vue编译后会生成index.html,所以我们将图片与index.html放在同一目录下,相当于在index.html中使用引入图片

    login-bg.png

    login-bg.png

    情况2:图片在/src/assets目录下

    把图片放到/src/assets目录下

    0ceb3ed2fd34

    情况2-1.png

    文件层级关系见下图

    0ceb3ed2fd34

    情况2-2.png

    已知我们在vue中配置@为src的目录

    0ceb3ed2fd34

    情况2-3.png

    方式1

    在vue组件中定义一个变量,变量值为”使用require()方法获取的文件路径”。

    require()方法是将编写代码时定义的路径转换为编译打包后的路径。

    // 在vue组件中定义此变量,组件创建成功后该变量值为'/static/img/login-bg.df6a3174.png'

    backgroundImgUrl: require('@/assets/login-bg.png')

    方式2

    在vue文件中使用style标签写css样式

    .login-container {

    /*

    * 当前vue文件在login文件下,我们梳理一下通过相对路径找到图片文件

    * login ↑ views ↑ src ↓ assets ↓ login-bg.png

    * 于是我们得出如下路径,经过测试可以成功引入图片

    * 这里需要提一下,这里路径是编写代码时的路径,vue在编译打包时会对路径进行处理

    */

    background-image: url('../../assets/login-bg.png');

    /*

    * 在vue文件中的style标签内,也可以使用@表示src目录,不过要在前面加~,也就是~@

    * 使用~@后我们就可以快速写出下面的路径了

    */

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

    /* 此行样式:背景图会按比例缩放填充满整个背景(能保证背景图不变形) */

    background-size: cover;

    }

    展开全文
  • vue背景图片和public引入问题

    千次阅读 2020-11-12 17:01:47
    目录vue背景图片引入问题 vue背景图片引入问题 ~@的意思: @是webpack设置的路径名,代表的是src目录,可以在build / webpack.base.conf.js更改设置 在这里插入图片描述 ~ 是相对于下面的文件路径的意思 ...

    vue 之 背景图片引入问题

    ~@的意思: @是webpack设置的路径名,代表的是src目录,可以在build / webpack.base.conf.js更改设置
    在这里插入图片描述
    ~ 是相对于下面的文件路径的意思

    background-image: url("~@/assets/image/mobile/bg.png");
    background-size: 100% 100%;
    

    public

    ./ 就是相对于public文件夹中取出img资源

    itemUrl: "./img/assetList/G01GJ01020.png",
    
    展开全文
  • vue引入图片背景

    千次阅读 2018-09-25 15:45:42
    1,引入图片,在img元素中用:src绑定地址的 2,直接在样式中引用的    
  • 四、背景图片background-image如何渲染? 一、关于Vue-Cli图片引入问题? 首先我们要清楚Vue-cli是基于Webpack来进行的打包,其次我们再来看一下Vue-cli的官网是如何给出我们的打包引入图片方式的。 二、两种引入...
  • 使用vue添加背景图片时,刚开始是加在css样式上,然后路径也没错,但是浏览器上会把图片路径转成base64,但是图片大小超过阈值就不转了,直接引入背景图片用在浏览器上时,由于路径解析的问题,图片并不能够正确的显示...
  • vue添加背景图片

    2020-04-22 18:21:03
    1.src下新建文件夹images用于存放将要引入背景图片 2.样式代码: background-image: url("../../images/1.jpg"); background-repeat: no-repeat; background-size: 100% 100%; height: 100%; ...
  • vue引入图片

    2019-12-26 10:21:08
    背景图片 background-image: url(~@/assets/img/index/list.png); :src方式 //Vue.js中引入图片路径的方式 html: :src="item.url" js: data(){ return{ twoList: [{ url: require('.....
  • Vue单文件中引入背景图片时,四周有空白的问题问题背景初始引入背景图更新后的背景图设置 问题背景 近期公司有个管理系统前后端分离,但是前端人员不够,只能我们后端来凑,而在前端的开发过程中总是遇到一些特简单...
  • 使用vue添加背景图片时,刚开始是加在css样式上,然后路径也没错,但是浏览器上会把图片路径转成base64,但是图片大小超过阈值就不转了,直接引入背景图片用在浏览器上时,由于路径解析的问题,图片并不能够正确的显示...
  • # Vue设置背景图片

    2020-07-22 21:16:04
    Vue设置背景图片 使用Css的方式引入有问题,不显示图片,使用下面的方法 <template> <div class="login-wrap"> <img :src="imgUrl" width="100%" height="758"> </div> </template...
  • vue中require引入图片背景

    千次阅读 2020-10-12 10:48:16
    <template> <div class="vote-container"> <div class="img" :style="{backgroundImage:'url('+src+')'}"></div> <img :src="src" /> </div> <... retu.
  • html部分 <div class="imgBox" :style="{backgroundImage:'url('+imgUrl+')'}"></div> css部分 .imgBox{ width: 250px; height: 150px; background-size: cover; }
  • <!... <... <head> ...meta charset="UTF-8">...引入vue之_背景图片渐变</title> <!--引入jQuery--> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>.
  • 解决vue中加背景图片报错

    千次阅读 2019-01-04 18:26:38
    vue中加css背景图片时最好不要使用@,此时的@可能会被解析为函数符号会报 错 改成即可解决
  • vue引用背景图片方法

    2020-08-11 15:13:33
    <div class="tuijian" :style="{'background-image': 'url('+data.image_url+')'}"> </div>
  • Vue背景图片无法加载

    千次阅读 2020-04-15 18:57:03
    遇到过这种情况,调试的时候图片是存在的,能够在style中看到图片的,但是背景就是无法显示。特别奇怪的是如果不是给整个body加background或者对最外层的div的class加background,都可以添加。 比如随便选中一个类...
  • 在一个Vue的文件中可以...本文将以动态设置背景图片作为实例,进行讲解。 1. 引入公共方法 (1) 新建公共方法js (2) main.js中引入 2. 使用实例 1. 引入公共方法 (1) 新建公共方法js (2) main.js中...
  • VUE引入背景图直接使用url('@/assets/img...')会报错:"This relative module was not found: * ./@/assets/img/" 场景:直接背景图url('@/assets/img/common/collect.svg')会报错; 解决:在@前面加上~即可。
  • vue里面 背景图使用 @assets 引入图片会报错: div{ background:url("@assets/img/a.png") // 会报错 } 解决办法:在@符号前面加个~就行了 div{ background:url("~@assets/img/a.png") // 在@符号前面加个~就行了 ...
  • //在css引入 background: url("../../imgs/weixing.png"); 抱错 //改成 background: url("~@/imgs/weixing.png"); ~@的意思: @是webpack设置的路径名,代表的是src目录,可以在build / webpack.base.conf.js...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,031
精华内容 2,412
关键字:

vue引入背景图片

vue 订阅