@mornfago

Как использовать изображение в React через класс?

Создаю простую библиотеку на React. Меня интересует один конкретный вопрос, почему при передаче через в
src {this.props.cover} изображение не отображается, а при передаче путя в лоб - '/image/lich.jpg' все работает. Второй способ не котируется, так как книг тьма, изображений столько же.
Использую create-react-app

Вот js код:
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

const main = document.getElementById("main")
const head = <div className="site">
				<header>
					<div className="head_catalog">
						<button className = "catalog">Каталог жанров&#9660;</button>
						<div id="myDropdown" className="dropdown-content">
							<a><button className = "genre" id = "Fentesy">Фэнтези</button></a>
							<a><button className = "genre" id = "Fantastic">Фантастика</button></a>
							<a><button className = "genre" id = "Detective">Детектив</button></a>
							<a><button className = "genre" id = "Poem">Поэзия</button></a>
							<a><button className = "genre" id = "History">Историческая проза</button></a>
						</div>
					</div>
					<div className = "head_favorit">
						<button className = "favorit">Избранное</button>
					</div>
					<div className = "head_search">
						<input name = "search"  placeholder = "Поиск по автору"></input>
						<button className = "search_button">&#128269;</button>
					</div>
				</header>
				<div className = "spisok"></div>
			</div>

class Books extends React.Component {
	render() {
	  return (
		<figure className="book">
		  <img className="imagef" src={this.props.cover} alt="Book Cover" />
		  <figcaption>{this.props.name}</figcaption>
		</figure>
	  );
	}
  }

const biblioteka = []
const ann_lich = "Злоба его стала легендой. Владыка всех неупокоенных Плети, хозяин рунического клинка Ледяная Скорбь, непримиримый враг всех вольных народов Азерота, Король-лич – существо неизмеримой мощи и непревзойденной жестокости, чья ледяная душа без остатка поглощена стремлением уничтожить все живое на Азероте."
const book_lich = new Books({name: "Возвышение Короля-лича", author: "Кристи Голден", genre: "Фэнтези", annatation: ann_lich, page: 416, year: 2009, cover: '/images/lich.jpg'})
biblioteka.push(book_lich)

console.log(biblioteka)
ReactDOM.render(head, main)
const bookContainer = <div className="book-container">{biblioteka.map((book, index) => <Books key={index} {...book} />)}</div>;
ReactDOM.render(bookContainer, document.querySelector('.spisok'));
  • Вопрос задан
  • 69 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы