在学习bootstrap时,书中的源码是用的data-src来定义图像位置,但是我在使用的时候无法显示图片;data-src可以在img标签中使用来显示图片吗?我使用src可以,而是用data-src不可以。书上的源码:


class="thumbnail"> <<span class="hljs-name">img
data-src="图片地址" alt="..."> <<span class="hljs-name">div
class="caption">
<<span class="hljs-name">h3>Thumbnail
label</<span
class="hljs-name">h3> <<span
class="hljs-name">p>...</<span class="hljs-name">p>
<<span
class="hljs-name">p> <<span class="hljs-name">a href="#"
class="btn
btn-primary">Action</<span
class="hljs-name">a> <<span class="hljs-name">a href="#"
class="btn
btn-default">Action</<span
class="hljs-name">a> </<span class="hljs-name">p>
</<span
class="hljs-name">div> </<span class="hljs-name">div>

本来就是src的才会显示。data-src只是注意储存的,比如做懒加载的时候就可以把真实的url先写到这个属性里面

用来做动态延迟加载的,就是懒加载的

那开始的时候索性src也别用。用其他的比如src1。

然后对遍历所有的img标签,如果有data-src的,将其值赋给src,如果没有data-src,则将src1的值赋给src

Bootstrap中data-src无法显示图片,但是src可以的更多相关文章

  1. [AX]AX2012 R2 EP员工自助服务中的产品不能显示图片的问题

    在员工自助服务EP站点中员工可以通过Order products自助提交采购申请,在正确设置员工采购目录后会罗列出允许员工购买的产品,每个产品都可带有图片,我们可以通过Product image来为产 ...

  2. 【Vue中的坑】vue项目中动态绑定src不显示图片解决方法

    v-for绑定src的数据如下: data() { return { img_src:"../../assets/images/mirror-service.png" } } 渲染 ...

  3. bootstrap中如何让响应式图片(img-responsive)水平居中

    我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...

  4. win7中资源管理器不能显示图片预览的解决方法

    在用xp的时候,在资源管理器里面预览图片文件是在普通不过的事情了.换到win7之后,图片文件一直不能预览,只是显示图标还挺烦的.肯定是哪里设置的不对,下午闲来无事,找到是哪里的问题了. 如果你也遇到相 ...

  5. bootstrap中日历组件只显示年月

    大多数情况下日历组件我们使用的都是yyyy-mm-dd的日历格式,但是有时候需求不需要我们精确到日,而是最小单位到月份(yyyy-mm),网上找了很多方法,但是都没有我想要的效果,一些属性的设置都没有 ...

  6. img src 直接显示图片字符串,微信例子

    <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANS ...

  7. vue bootstrap中modal对话框不显示遮挡打不开

    使用Vue bootstrap时,点击modal却不能弹出来,被隐藏遮挡无法显示,参考下面的这个博客的说明解决了这个问题: Heap Stack Blog(pingbook.top)Vue boots ...

  8. Qt:添加点击事件的Label并显示图片

    1.给label添加点击事件 Qt中原本的label是没有点击事件的,如果想添加点击事件的话,可以继承QLabel类并重载鼠标事件(比如mousePressedEvent),然后在鼠标事件中发送一个信 ...

  9. vue中通过定义的数组循环将img的src引入图片却不显示图片问题解决方法

    需要前端循环图片数组将其放到页面中去. 需要将src渲染到页面中,如果单纯写src的路径会出现不显示图片的问题 因为图片路径在assets,所以需要require一下.

随机推荐

  1. sql存储过程中使用 output

    1.sql存储过程中使用 output CREATE PROCEDURE [dbo].[P_Max] @a int, -- 输入 @b int, -- 输入 @Returnc int output - ...

  2. VS2010 Extension实践(3)——实现自定义配置

    在之前的两篇曾提到通过VSSDK(MSDN也叫VSX)来拓宽思路,实现一些MEF Extension所不能做到的功能,比如获取IVsUIShell服务来执行Command等等,这里我给各位看官展示如何 ...

  3. Benchmark Test On Android Devices

    一.Android设备上的Benckmark测试概述 同PC相比,在Android设备上的性能测试还没有一个公认的标准.也没有PC上那么多的测试程序集.但我们可以通过一些工具所得到的信息更好的了解设备 ...

  4. class, classloder, dex 详解

    class与dex文件 什么是class文件 class文件是一种能够被JVM识别,加载并且执行的文件格式. class文件的作用 class文件的作用是记录一个类文件的所有信息. 例如记住了当前类的 ...

  5. Python核心编程笔记--动态属性

    一.动态语言与静态语言 1.1 静态语言特点: a. 在定义变量时需要指定变量的类型,根据指定的类型来确定变量所占的内存空间 b. 需要经过编译才能运行 c. 在代码编译后,运行过程不能对代码进行操作 ...

  6. Windows同时安装Python2、Python3兼容运行

    Python2.Python3可以同时安装在windows上,关键是如何有选择的运行Python2还是Python3.   指定运行版本 如果你有一个Python文件叫 hello.py,那么你可以这 ...

  7. 理解SynchronizationContext,如何在Winform里面跨线程访问UI控件

    SynchronizationContext 类是一个基类,可提供不带同步的自由线程上下文. 此类实现的同步模型的目的是使公共语言运行库内部的异步/同步操作能够针对不同的异步模型采取正确的行为.此模型 ...

  8. PyCharm/WebStorm遇到Cannot start internal HTTP server

    在开始学习html.css的时候,使用PyCharm 的模拟链接到服务器的时候总是遇到 网上也没有遇到合适的解决方案,遂下载了WebStorm,希望能通过安装配置好一些设置,结果依然不行,只有从头分析 ...

  9. 【树链剖分】洛谷P3384树剖模板

    题目描述 如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作1: 格式: 1 x y z 表示将树从x到y结点最短路径上所有节点的值都加上z 操作2: 格式 ...

  10. Kylin与CDH兼容性剖析

    1. 概述 Apache Kylin™是一个开源的分布式分析引擎,提供Hadoop之上的SQL查询接口及多维分析(OLAP)能力以支持超大规模数据,最初由eBay Inc. 开发并贡献至开源社区.它能 ...