Блог

Главная - Вопросы по программированию - Невозможно отобразить изображение на основе prop из вызова axios в веб-приложении React

Невозможно отобразить изображение на основе prop из вызова axios в веб-приложении React

#reactjs

#reactjs

Вопрос:

Я пытаюсь отобразить изображение, используя литералы шаблона, с результатом запроса к базе данных, используемого в src изображения.

Однако литерал шаблона преобразуется в чистую строку. Это похоже на основную проблему, но я не могу понять, что я делаю не так.

Вот функция рендеринга в моем компоненте:

 const fetchLoans = this.state.debts.map(debt => {


      return (<div className="individual-loan-amount-outstanding" key={debt._id}>
        <img className="individual-loan-picture" src={('../../../images/${debt.provider}.png')} alt="Provider of loan."/>
        </div>
      )
    })

Может кто-нибудь указать, где я ошибся? Спасибо!

Комментарии:

1. Было бы неплохо понять, как выглядит ваша текущая настройка. Находятся ли эти изображения в «общедоступной» папке? Используете ли вы webpack , если да, есть ли у вас настройка загрузчика? Используете ли вы create react app?

Ответ №1:

Это может быть потому, что вы не используете обратные ссылки в шаблоне?

     <img
      className="individual-loan-picture"
      src={`../../../images/${debt.provider}.png`}
      alt="Provider of loan."
    />

Ответ №2:

Заменить ' на `:

 const fetchLoans = this.state.debts.map((debt) => {
    return (
        <div className="individual-loan-amount-outstanding" key={debt._id}>
            <img className="individual-loan-picture" src={`../../../images/${debt.provider}.png`} alt="Provider of loan." />
        </div>
    );
});