Имеется изображение, и необходимо прописать путь к нему, в src
. Сам путь передается в компонент через props
.
Во-первых,<img src="./path/img.png">
- если передавать так путь, то изображение не появляется, поэтому использую: <img src={require("./path/img.png")}>
- если знаете вариант лучше, то буду рад его узнать.
Во-вторых, при передачи в require
путь из props
(<img src={require(this.props.card)}>
), то появляется ошибка Error: Cannot find module "."
.
this.props.card
- 100% является строкой.
Как быть, как правильно передать путь в src
?
3 ответа
Вы можете вызывать require
не у потомка, а у родителя:
<MyComponent imageSrc={require("./image.jpg")} />
И использовать уже привычный метод:
<img src={this.props.imageSrc} />
-
Суть в том, что мне не определенный путь к файлу нужен в виде строки засунуть в
require
, а переменную содержащий путь. если делать так, как вы советуете, то выглядить оно будет так:<MyComponent imageSrc={require(card.img)}
– ИльяCommented 13 авг. 2018 в 7:22
Забирать путь к файлам можно прямо из "заинтересованного" компонента, а конкретный файл передавать в пропсы.
Родитель:
const Toolbar = () => {
return (
<div className='toolBar'>
<div className='tools'>
<ToolButton image='undo.png' />
<ToolButton image='redo.png' />
<ToolButton image='save.png' />
</div>
</div>
)
}
Потомок:
const ToolButton = ({ image }) => {
return (
<div className='tool-button'>
<img src={require('../assets/icons/' + image)} alt='' />
</div>
)
}
-
пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править Commented 23 мар. 2023 в 11:31
В реакт импортировать нужно изображение
Import img "./path/img.png"
Потом этот img использовать в src
<img src={img}>
Это по вопросу как прописать путь к изображению
{require(this.props.card)}
заставляет искать модуль с именем вашей картинки.