问题发生于一次mock数据，生成了base64格式的东西，因为编码包在一个变量中，不知道怎么直接在 :style 中引入。

解答1：格式background-image: url(此处是我们mock生成的base64) ------ 这里的url是死的，就是说是一大串的 base64的编码。

解答2：img :src="item.thumbnail_pic_s" 这才是正确答案啊！！！ vue的基础不好就是容易出小错误.

关键是还要记得设置宽高，基础！

 <img :style="{width:'100px',height:'100px',backgroundImage: 'url(data:balabal)',

}" alt="">

怎么在Vue中使用Base64格式的背景的更多相关文章

  1. vue中使用base64进行加解密

    vue进行Base64加解密 背景 项目中需要对特殊字符进行处理,避免json和数据库的特殊字符(""等)冲突,刚好学了信息安全,干脆整个加解密,wkk.. 使用步骤 打开dos, ...

  2. vue中使用Base64和md5和rsa

    https://blog.csdn.net/benben513624/article/details/88113459(copy) https://www.cnblogs.com/myfate/p/1 ...

  3. vue中使用base64和md5

    1.在项目根目录下安装 cnpm install --save js-base64 cnpm install --save js-md5 2.在项目文件中引入 import md5 from 'js- ...

  4. vue中使用动画vue-particles实现背景粒子酷炫效果

    先来看我做的效果 我这个是用的背景色加上这个粒子效果实现的demo 平时我们做项目的话会添加背景图片这些,可能更加好看 看我的实现步骤 cnpm install -g vue-cli vue init ...

  5. 在Vue中使用CodeMirror 格式显示错误 行数错乱 & 代码隐藏

    项目需要在线展示和编辑Json文件,所以需要找一个代码编辑器,因为我们的项目直接使用的 vueAdmin-template 这个模板 json编辑器也是直接从 vue-element-admin 项目 ...

  6. vue中的金额格式0.00 和 后台返回时间格式带T调整正常格式

    <template> <div class="consumption"> <p>{{payTime|Time}}</p> <p ...

  7. VUE中给template组件加背景

    <template> <div class="index_background" > </div> </template> < ...

  8. Vue中如何插入m3u8格式视频，3分钟学会！

    ​        大家都知道video只支持ogg.webm.MP4格式,但是要是m3u8格式的视频怎么办?最近遇到这个问题在网上找了好多办法都不行,最后找到video.js后才完美解决,所以决定写一 ...

  9. Atom 编辑器安装 linter-eslint 插件，并配置使其支持 vue 文件中的 js 格式校验

    安装方式有如下几种. 1.最常用的安装方式. # 进入atom插件文件夹 cd ~/.atom/packages/ # git clone 插件源文件 git clone https://github ...

随机推荐

  1. Xposed模块开发学习记录

    Xposed模块相关API可以参考在线文档: https://api.xposed.info/reference/packages.html     入门教程可以参考: https://github. ...

  2. tarjan求割点

    首先给大家一个网址讲的比较细:http://www.cnblogs.com/en-heng/p/4002658.html 如果还有不懂的话,可以回来再看看我的文章; 概念明确: 树边:(在[2]中称为 ...

  3. 孤独地、凄惨地AK

    一个\(OIer\)要写多少\(for\) 才能被称为一个\(OIer\) 一位巨佬要爆过多少次零 才能在省选逆袭 手指要多少次掠过键盘 才能安心地休息 \(OI\)啊 我的朋友 在风中\(AK\) ...

  4. MySQL的分页技术总结

    利用子查询示例: SELECT * FROM your_table WHERE id <= (SELECT id FROM your_table ORDER BY id desc LIMIT ( ...

  5. 实用的原生js图片轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. nefu26(求数的位数)

    Description 根据密码学需要,要计算某些数的阶乘的位数. Input 第一行为整数n ,接下来 n 行, 每行1个数m (1 ≤ m ≤ 10^7) . Output 输出m的阶乘的位数. ...

  7. ceph-deploy mon add 失败

    ceph-deploy mon add 失败 标签(空格分隔): ceph-deploy 运维 问题描述: 现有集群只有一个mon,需要通过ceph-deploy mon add添加两个mon.在ad ...

  8. stm32 奇怪的位赋值问题 出错了

    转载请注明出处:http://blog.csdn.net/qq_26093511/article/category/6094215 1.在51单片机里 ,下面这两种操作方法都是一样的,没有什么问题! ...

  9. 使用python对文件夹里面所有代码行数进行统计。

    统计目录下所有的代码个数和总行数. # -*- coding: utf-8 -*- # @Author : ydf import json import os from pathlib import ...

  10. pyodbc简单使用

    1.连接数据库 1)直接连接数据库和创建一个游标(cursor) cnxn = pyodbc.connect('DRIVER={SQL Server};SERVER=localhost;DATABAS ...