2018-10-10 22:03:03 +00:00
---
id: 587d7fae367417b2b2512be6
title: Render Images from Data Sources
challengeType: 6
2019-08-28 13:26:13 +00:00
forumTopicId: 18265
2018-10-10 22:03:03 +00:00
localeTitle: Отображение изображений из источников данных
---
## Description
2019-08-28 13:26:13 +00:00
< section id = 'description' >
Последние несколько проблем показали, что каждый объект в массиве JSON содержит ключ < code > imageLink< / code > с о значением, которое является URL-адресом изображения кошки. Когда вы перебираете эти объекты, вы можете использовать это свойство < code > imageLink< / code > для отображения этого изображения в элементе < code > img< / code > . Вот код, который делает это: < code > html += " < img src = ' " + val.imageLink + " ' " + " alt=' " + val.altText + " ' > " ;< / code >
< / section >
2018-10-10 22:03:03 +00:00
## Instructions
2019-08-28 13:26:13 +00:00
< section id = 'instructions' >
Добавьте код, чтобы использовать свойства < code > imageLink< / code > и < code > altText< / code > в теге < code > img< / code > .
< / section >
2018-10-10 22:03:03 +00:00
## Tests
< section id = 'tests' >
```yml
tests:
2019-08-28 13:26:13 +00:00
- text: You should use the < code > imageLink</ code > property to display the images.
testString: assert(code.match(/val\.imageLink/g));
2018-10-10 22:03:03 +00:00
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'html-seed' >
```html
< script >
document.addEventListener('DOMContentLoaded',function(){
document.getElementById('getMessage').onclick=function(){
req=new XMLHttpRequest();
req.open("GET",'/json/cats.json',true);
req.send();
req.onload=function(){
json=JSON.parse(req.responseText);
var html = "";
json.forEach(function(val) {
html += "< div class = 'cat' > ";
// Add your code below this line
// Add your code above this line
html += "< / div > < br > ";
});
document.getElementsByClassName('message')[0].innerHTML=html;
};
};
});
< / script >
< style >
body {
text-align: center;
font-family: "Helvetica", sans-serif;
}
h1 {
font-size: 2em;
font-weight: bold;
}
.box {
border-radius: 5px;
background-color: #eee ;
padding: 20px 5px;
}
button {
color: white;
background-color: #4791d0 ;
border-radius: 5px;
border: 1px solid #4791d0 ;
padding: 5px 10px 8px 10px;
}
button:hover {
background-color: #0F5897 ;
border: 1px solid #0F5897 ;
}
< / style >
< h1 > Cat Photo Finder< / h1 >
2019-02-24 15:59:49 +00:00
< p class = "message" >
2018-10-10 22:03:03 +00:00
The message will go here
< / p >
< p >
< button id = "getMessage" >
Get Message
< / button >
< / p >
```
< / div >
< / section >
## Solution
< section id = 'solution' >
2019-08-28 13:26:13 +00:00
```html
2018-10-10 22:03:03 +00:00
// solution required
```
2019-08-28 13:26:13 +00:00
2018-10-10 22:03:03 +00:00
< / section >