FCC-JS-JQ-Render Images from Data Sources-從數(shù)據(jù)源渲染圖像

從上節(jié)課獲得的JSON數(shù)組中,每個對象都包含了一個以imageLink為鍵(key)艇拍,以貓的圖片的url為值(value)的鍵值對眠蚂。
當(dāng)我們在遍歷這些對象時,我們用imageLink的屬性來顯示img元素的圖片雾棺。
代碼如下:

html += "<img src = '" + val.imageLink + "'>”;

示例

<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function() {
?     $.getJSON("/json/cats.json", function(json) {

        var html = "";

        json.forEach(function(val) {

          html += "<div class = 'cat'>";

          // 請把你的代碼寫在這條注釋以下
          html += "<img src ='" + val.imageLink + "'>";
          
          
          // 請把你的代碼寫在這條注釋以上

          html += "</div>";

        });

??  ?   $(".message").html(html);

      });
    });
  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末膊夹,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子捌浩,更是在濱河造成了極大的恐慌放刨,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件尸饺,死亡現(xiàn)場離奇詭異进统,居然都是意外死亡,警方通過查閱死者的電腦和手機浪听,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門螟碎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人迹栓,你說我怎么就攤上這事掉分。” “怎么了克伊?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵酥郭,是天一觀的道長。 經(jīng)常有香客問我答毫,道長褥民,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任洗搂,我火速辦了婚禮消返,結(jié)果婚禮上载弄,老公的妹妹穿的比我還像新娘。我一直安慰自己撵颊,他們只是感情好宇攻,可當(dāng)我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著倡勇,像睡著了一般逞刷。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上妻熊,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天夸浅,我揣著相機與錄音,去河邊找鬼扔役。 笑死帆喇,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的亿胸。 我是一名探鬼主播坯钦,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼侈玄!你這毒婦竟也來了婉刀?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤序仙,失蹤者是張志新(化名)和其女友劉穎突颊,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诱桂,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡洋丐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了挥等。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片友绝。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖肝劲,靈堂內(nèi)的尸體忽然破棺而出迁客,到底是詐尸還是另有隱情,我是刑警寧澤辞槐,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布掷漱,位于F島的核電站,受9級特大地震影響榄檬,放射性物質(zhì)發(fā)生泄漏卜范。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一鹿榜、第九天 我趴在偏房一處隱蔽的房頂上張望海雪。 院中可真熱鬧锦爵,春花似錦、人聲如沸奥裸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽湾宙。三九已至樟氢,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間侠鳄,已是汗流浹背埠啃。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留畦攘,地道東北人霸妹。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓十电,卻偏偏與公主長得像知押,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子鹃骂,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理台盯,服務(wù)發(fā)現(xiàn),斷路器畏线,智...
    卡卡羅2017閱讀 134,659評論 18 139
  • width: 65%;border: 1px solid #ddd;outline: 1300px solid #...
    邵勝奧閱讀 4,823評論 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5静盅? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,486評論 1 45
  • 文/Meetingtian 這是一個想象力缺乏的時代寝殴,每個人都有自己的寫作故事蒿叠,之于寫作我也來談?wù)勛约旱膸c想法。...
    MeetingTian閱讀 181評論 2 8
  • 放債的蚣常,借債的市咽,都是僥幸,都是賭命抵蚊。討債的施绎,欠債的,都是冤孽贞绳,都是茍活谷醉。 (本文不是案情的真實摹寫,而是以此為素材...
    干國祥備課老干閱讀 22,753評論 143 25