Изменить: Noob помогает здесь.
Я уже проверил много подобных вопросов, и ни один из них не является одинаковым.
React получает массив объектов из экспресса. прокрутите, получите ссылку на изображение каждого объекта и добавьте ее в источник.
Это исходный код
{this.state.currentTemplates.map((items, pos) => {
return (
<div className={`template `}>
<img src={require(`${items.link}1.jpg`)} />
<p>{items.name}</p>
<div className="buy">buy</div>
</div>
если такое изображение существует, require найдет его, и оно будет работать.
но если я отправлю запрос другой функции, чтобы сначала проверить, существует ли изображение, например, попытка поймать.
<div className={`template `}>
//sending url to another function. Also I can put the function outside of class and just call without 'this' and it does not make any difference.
<img src={this.checkUrl(`${items.link}1.jpg`)} />
<p>{items.name}</p>
<div className="buy">buy</div>
Ex:
checkUrl(url) {
console.log(url); // receive right url '../products/templates/a.jpg'
try {
// try will require the right url but module cannot found it and it goes to catch. Now I can also put it in a variable var a= require(url) and it does not make a difference
require(url);
console.log("it works "); // it never gets to here.
return url; // this may not work once returned but it does not get to here.
}catch(e) {
//react jump to catch with "cannot find module '../products/templates/a.jpg'"
console.log(e);
}
}
Я получил ошибку: требуется не может найти модуль '../products/templates/1.jpg'
интересная вещь. Если я добавлю папку продукта в папку компонента с файлом templates.jsx. оно работает.
Также это не синтаксическая ошибка, возможно, я сделал опечатку, воспроизводя проблему здесь.
Резюме: если я вызову require(url) прямо из src jsx, он найдет изображение.
Если я передам URL-адрес другой функции, чтобы попытаться поймать. Консоль регистрирует правильный URL-адрес, но требует, чтобы бросок не смог найти модуль.
это ограничение реакции? есть ли обходной путь? Я приближаюсь к этому тебе неправильно?
