2015-12-06 31 views
3

example你打算在Twitter的引導的網站上,下面的代碼Twitter的引導數據-SRC卡不工作

<div class="card"> 
    <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap"> 
    <div class="card-block"> 
    <h4 class="card-title">Card title</h4> 
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
    <a href="#" class="btn btn-primary">Button</a> 
    </div> 
</div> 

應該交出了漂亮的卡定,但它產生的

enter image description here

任何人都可以告訴問題可能是什麼? 似乎數據屬性不適合我。

+0

你在特林實現與這個?顯示圖像或靜態生成的圖像(如holder.js)。 –

回答

1

我認爲@bsmp在他的回答中是正確的。

持有者將隨後處理具有特定src屬性的所有圖像,如src="holder.js/318x180",並自動生成圖像源到data-src屬性。

<script src="https://cdn.jsdelivr.net/holder/2.9.0/holder.min.js"> </script>

您還可以在https://github.com/imsky/holder

  • 使用img元素的src屬性下載holder.js到:

    1. 通過使用下面的代碼包括持有人在你的網頁定義您的持有者圖片:

      <img class="card-img-top" src="holder.js/318x180" alt="Card image cap"> <div class="card-block">

    請注意,您不必逃避在src attribte持有者語法holder.js

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/> 
     
    
     
    <div class="card" style="width:318px;"> 
     
        <img class="card-img-top" src="holder.js/318x180" alt="Card image cap"> 
     
        <div class="card-block"> 
     
    <h4 class="card-title">Card title</h4> 
     
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
     
    <a href="#" class="btn btn-primary">Button</a> 
     
        </div> 
     
    </div> 
     
    
     
    <script src="https://cdn.jsdelivr.net/holder/2.9.0/holder.min.js"></script>
    的最新版本

  • 2

    您從代碼抓取代碼的示例使用的是holder.js,但Bootstrap發行版實際上並沒有隨holder.js一起提供。你的data-src屬性引用了一個不存在的文件。

    如果你需要一個佔位符圖像,您可以:

    如果使用普通的圖像,請記住,你必須使用正常來源屬性:

    <img class="card-img-top" src="http://placehold.it/350x150" alt="Card image cap"> 
    
    +0

    我不認爲這個問題與holder.js有關。我更新了這個問題。即使使用placehold,也會出現問題。 –

    +0

    @PratikKhadloya - 您需要對常規圖像使用「src」屬性。請注意,Placehold.it的示例圖像如下所示:''。我也更新了我的答案。 – BSMP

    +0

    @PratikKhadloya - 我也剛剛恢復了你所做的編輯;有同樣問題的人需要看到原始問題。不要使用答案中的建議來更新問題。 – BSMP