Не отображаются картинки
В скрипте при вводе названия какой то книги, должна она показываться(тип поиск), но картинки не отображаются.
js1 :
// get DOM elements
const searchInput = document.getElementById('searchInput');
const resultsContainer = document.getElementById('resultsContainer');
// search from array
function searchBooks(query) {
return CLASS5.filter(book => {
return book.query.toLowerCase().includes(query.toLowerCase())
|| book.athor.toLowerCase().includes(query.toLowerCase())
|| book.pages.toLowerCase().includes(query.toLowerCase())
|| book.age.toLowerCase().includes(query.toLowerCase())
|| book.classn.toLowerCase().includes(query.toLowerCase());
});
}
// print
function displayResults(results) {
resultsContainer.innerHTML = '';
if (results.length === 0) {
resultsContainer.innerHTML = '<p>Ничего не найдено...</p>';
return;
}
results.forEach(book => {
const bookCard = document.createElement('div');
bookCard.innerHTML = `
<h2>${book.query}</h2>
<p>${book.athor}</p>
<p>${book.pages}</p>
<p>${book.age}</p>
<p>${book.classn}</p>
<img src="${book.images}" alt="Book Image">
`;
resultsContainer.appendChild(bookCard);
});
}
// handler
searchInput.addEventListener('input', (event) => {
const query = event.target.value;
const results = searchBooks(query);
displayResults(results);
});
js2(масcив):
var CLASS5 = [
{
"query": "Царевна-Лягушка",
"athor": "-",
"pages": "3-4 листа А4",
"age": "3+",
"classn": "5 класс",
"images": "json/images/1.jpg",
},
{
"query": "Журавль и цапля",
"athor": "-",
"pages": "2-3 листа А4",
"age": "3+",
"classn": "5 класс",
"images": "json/images/2.jpg"
},
{
"query": "Солдатская шинель",
"athor": "-",
"pages": "4-6 листа А4",
"age": "3+",
"classn": "5 класс",
"images": "json/images/3.jpg"
},
{
"query": "Иван - крестьянский сын и чудо - юдо",
"athor": "-",
"pages": "3-5 листа А4",
"age": "3+",
"classn": "5 класс",
"images": "json/images/4.jpg"
},
{
"query": "Няне",
"athor": "А.С. Пушкин",
"pages": ">1 листа А4",
"age": "3+",
"classn": "5 класс",
"images": "json/images/5.jpg"
},
{
"query": "Cказка о мертвой царевне и о семи богатырях",
"athor": "А.С. Пушкин",
"pages": "8-10 листов А4",
"age": "3+",
"classn": "5 класс",
"images": "json/images/6.jpg"
},
{
"query": "Спящая царевна",
"athor": "В.А. Жуковский",
"pages": "10-12 листов А4",
"age": "3+",
"classn": "5 класс",
"images": "json/images/7.jpg"
},
{
"query": "Кубок",
"athor": "В.А. Жуковский",
"pages": "3-4 листа А4",
"age": "3+",
"classn": "5 класс",
"images": "json/images/8.jpg"
},
{
"query": "Чёрная курица, или Подземные жители",
"athor": "Антоний Погорельский",
"pages": "3-4 листа А4",
"age": "3+",
"classn": "5 класс",
"images": "json/images/9.jpg"
},
{
"query": "Заколдованное место",
"athor": "Н.В. Гоголь",
"pages": "67-88 листа А4",
"age": "6+",
"classn": "5 класс",
"images": "json/images/10.jpg"
},
{
"query": "Муму",
"athor": "И.С. Тургенев",
"pages": "12-14 листов А4",
"age": "6+",
"classn": "5 класс",
"images": "json/images/11.jpg"
},
{
"query": "Бородино",
"athor": "М.Ю. Лермонтов",
"pages": "5-16 листов А4",
"age": "6+",
"classn": "5 класс",
"images": "json/images/12.jpg"
},
{
"query": "Кавказкий пленник",
"athor": "Л.Н. Толстой",
"pages": "15-25 листов А4",
"age": "12+",
"classn": "5 класс",
"images": "json/images/13.jpg"
},
{
"query": "Хирургия",
"athor": "А.П. Чехов",
"pages": "3-4 листов А4",
"age": "6+",
"classn": "5 класс",
"images": "json/images/14.jpg"
},
{
"query": "Двенадцать месяцев",
"athor": "С.Я. Маршак",
"pages": "2-3 листов А4",
"age": "3+",
"classn": "5 класс",
"images": "json/images/15.jpg"
},
{
"query": "Робинзон Крузо",
"athor": "Д. Дефо",
"pages": "10-12 листов А4",
"age": "6+",
"classn": "5 класс",
"images": "json/images/16.jpg"
},
{
"query": "Снежная королева",
"athor": "Х.К. Андерсен",
"pages": "13-15 листов А4",
"age": "3+",
"classn": "5 класс",
"images": "json/images/17.jpg"
},
{
"query": "О чем говорят цветы",
"athor": "Ж. Санд",
"pages": "1-2 листа А4",
"age": "3+",
"classn": "5 класс",
"images": "json/images/18.jpg"
},
{
"query": "Приключения Тома Сойера",
"athor": "М. Твен",
"pages": "6-8 листов А4",
"age": "3+",
"classn": "5 класс",
"images": "json/images/19.jpg"
}
]
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input id="searchInput" type="text" placeholder="Что ищите?"> <br>
<a onclick="window.location.href='html/5class.html'">5 класс</a> <br>
<a onclick="window.location.href='html/6class.html'">6 класс</a> <br>
<a onclick="window.location.href='html/7class.html'">7 класс</a> <br>
<a onclick="window.location.href='html/8class.html'">8 класс</a> <br>
<a onclick="window.location.href='html/9class.html'">9 класс</a> <br>
<a onclick="window.location.href='html/10class.html'">10 класс</a> <br>
<a onclick="window.location.href='html11class.html'">11 класс</a>
<div id="resultsContainer"></div>
<script src="html/js/5json.js"></script>
<script src="html/js/search.js"></script>
</body>
</html>
Источник: Stack Overflow на русском