问题发生于一次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. 幻想乡三连B：连在一起的幻想乡

    $G[k][x]$表示所有$x$个点的无向图中每一个图的边数的$k$次方之和. $F[k][x]$就是在$G[k][x]$的基础上加了一个整体连通的性质. 有一个经典的套路就是对于$F$在对应的$G$ ...

  2. ACM学习历程—ZOJ 3777 Problem Arrangement（递推 && 状压）

    Description The 11th Zhejiang Provincial Collegiate Programming Contest is coming! As a problem sett ...

  3. ACM学习历程—HDU 5012 Dice（ACM西安网赛）（bfs）

    Problem Description There are 2 special dices on the table. On each face of the dice, a distinct num ...

  4. 为啥要去IOE——分布式架构的由来

    1946年2.14日,那是一个浪漫的情人节 , 世界上第一台电子数字计算机在美国宾夕法尼亚大学诞生了,她的名字叫ENIAC.这台计算机占地170平米.重达 30 吨,每秒可以进行 5000 次加法运算 ...

  5. BZOJ1727：[Usaco2006 Open]The Milk Queue挤奶队列

    我对\(Jhonson\)算法的理解:https://www.cnblogs.com/AKMer/p/9863620.html 题目传送门:https://www.lydsy.com/JudgeOnl ...

  6. Erlang generic standard behaviours -- summary

    gen_server 相关的片段分析得也差不多了, 这篇作为一个简要的总结.这一系列相关的分析暂且告一段落(之后如有必要,还会回来的 ^^ ),下一个系列主要是以pool 相关, 包括但不仅限于开源项 ...

  7. 使用cmd命令行方式登录ftp上传下载数据

    部分用户在使用ftp工具登录空间上传下载过程中经常会遇到各种问题,如主动模式,被动模式,以及其他导致无法登陆ftp .上传数据.下载数据的问题,这时候不妨使用一下命令行方式.命令行下可以避免很多由于f ...

  8. centos7 查看启动ntp服务命令

    标签(空格分隔): centos7 系统 1. 查看ntp服务命令: [root@node1 ~]# systemctl status ntpd * ntpd.service - Network Ti ...

  9. Ruby中的include

    Ruby中的include语句应注意以下两个问题: 1.include与文件无关.C语言中,#include预处理指令在编译期将一个文件的内容插入到另一个文件中.Ruby语句只是简单地产生一个指向指定 ...

  10. js中一些小知识点总结--持续更新

    以下知识点来自于编写高质量代码-改善JavaScript程序的188个建议,只用于自我知识的补充. 一.NaN 1.NaN是一个特殊的数量值,不表示一个数字,尽管下面的代码仍然是返回类型为number ...