Bootstrap中data-src无法显示图片,但是src可以

Bootstrap中data-src无法显示图片,但是src可以

在学习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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/114253.html原文链接:https://javaforall.net

(0)
上一篇 2021年9月21日 下午4:00
下一篇 2021年9月21日 下午5:00


相关推荐

  • python写入txt文件中文乱码_python中怎么输入文件

    python写入txt文件中文乱码_python中怎么输入文件python写入txt文件出现省略号原因是print不完全,添加代码设置np.set_printoptions(threshold=np.nan)如果报错ValueError:thresholdmustbenumericandnon-NAN,trysys.maxsizeforuntruncatedrepresentation只需要importsys设置np.set_printoptions(threshold=sys.maxsize)将阈值设置在一个较大的数值就可以了.

    2026年4月15日
    6
  • Ubuntu安装jdk8的两种方式[通俗易懂]

    Ubuntu安装jdk8的两种方式[通俗易懂]安装方式:1):通过ppa(源)方式安装.2):通过官网安装包安装.JDK官网下载地址一:使用ppa(源)方式安装:1):添加ppa源sudoadd-apt-repositoryppa:webupd8team/javasudoapt-getupdate2):安装oracle-java-installer(jdk8版本)sudoapt-getinstallorac…

    2022年7月12日
    16
  • openclaw 配置飞书 报错 应用未建立长连接

    openclaw 配置飞书 报错 应用未建立长连接

    2026年3月13日
    3
  • 国产操作系统中标麒麟v6

    国产操作系统中标麒麟v6国产操作系统中标麒麟系列包括 服务器版本和桌面版本 资源下载地址 链接 https pan baidu com s 1 pZfeVkmdi Qgn4ZTOva3A 提取码 6s90

    2026年3月26日
    2
  • nextSibling previousSibling

    nextSibling previousSibling
    1/nextSibling属性
           该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。
          需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示:
         先来看一个例子:

            
    2022年7月13日
    32
  • 编码 & 8421BCD 码的故事

    编码 & 8421BCD 码的故事计算机编码中 我们都是先了解了二进制 其中分有符号数 无符号数 然后会接触到 BCD 码 那么 BCD 码是怎么产生的 为什么又要用四位二进制来表示呢 一 BCD 码 1 由来计算机使用二进制数来处理信息 但是如果二进制的形式输入和输出数据 就十分不方便了 一般来说 输入输出时采用十进制数 举例 明明二进制 0110 B 代表数字 6 但是人们更习惯 也更喜欢的数阿拉伯数字 6 也可以是中文六 那么 这里就存在一个问题 我们使用计算器 是输入的为十进制数 25 但是计算机使用二进制数来处理信息 那

    2026年3月17日
    1

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号