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

Question

[mornfago]

Создаю простую библиотеку на 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'));

Comments

[Алексей Ярков]

изображение не отображается

А в консоли ошибки есть?

[WbICHA]

const book_lich = new Books({name: "Возвышение Короля-лича", author: "Кристи Голден", genre: "Фэнтези", annatation: ann_lich, page: 416, year: 2009, cover: '/images/lich.jpg'})
biblioteka.push(book_lich)
// ...
biblioteka.map((book, index) => <Books key={index} {...book} />)

И каким образом это в принципе должно работать?

[WbICHA]

Создаю простую библиотеку на React.

Может тебе стоит начать с изучения самого реакта? Желательно, с нуля, судя по коду.

Использую create-react-app

И использовать то, что не умерло несколько лет назад.

[Kentavr16]

WbICHA, за что CRA под нож-то?)

[WbICHA]

Kentavr16,

Last publish
2 years ago

[WbICHA]

Kentavr16, да и на самом деле я его никогда не любил, он тянет за собой всякую фигню. А уж какой у него конфиг удобный...
Лучше уж самому ручками, чем использовать это, имхо.

[Kentavr16]

WbICHA, До вит это был неплохой бойлерплейт для начинающих. Какая-то попытка "в фреймворк". Тесты, замеры производительности. Но сообществу по итогу не зашло. Начинающие вообще тестов не пишут, а продвинутые любят самостоятельно конфигурировать проект видимо )
Я по привычке иногда юзаю для своих поделок, но плюсов перед самостоятельной настройкой или даже использованием vite назвать уже не могу, хоть и пытался что-то придумать из вредности.