Переменные Url и img не отображаются в моем приложении react

#reactjs

#reactjs

Вопрос:

В крошечном тестовом приложении мои переменные внутри кавычек (img, url) не работают. Если я помещаю их внутри элемента h1 или где-либо еще, он отображает правильный контент.

 render() {
  return (
    <div className="row">
      {this.state.pages.map((page, index) => {
        return (
          <div
            key={index}
            className="page-listing-element col-lg-3 col-md-6 col-sm-12 p-2 box-shadow overflow-hidden"
          >
            <div>
              <h1>
                {page.url} - {page.image}
              </h1>
              <a href="{page.url}" rel="nofollow">
                <img src="{page.image}" />
              </a>
              <h3>
                <a href="{page.url}">{page.name}</a>
              </h3>
            </div>
          </div>
        );
      })}
    </div>
  );
}
  

В моем браузере :

 <div>
  <h1>
    /fr/see-do/patrimoine-culture/ -
    http://localhost:8001/static/img/main/no_image.jpg
  </h1>

  <a href="{page.url}" rel="nofollow">
    <img src="{page.image}" />
  </a>

  <h3>
    <a href="{page.url}">Patrimoine et culture</a>
  </h3>
</div>
  

Ответ №1:

Вы используете их, strings добавляя их quotes . Вам просто нужно убрать кавычки, и все готово.

 <a href={page.url} rel="nofollow">
  <img src={page.image} />
</a>