В настоящее время я работаю над проектом React и хочу установить фоновое изображение отдельных элементов динамически.Я использую встроенные стили внутри компонента React:
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${this.props.book.previewLink})` }}></div>
Это отображается как:
<div class="book-cover" style="width: 128px; height: 193px; background-image: url("http://books.google.com/books?id=sJf1vQAACAAJ&dq=redux+react&hl=&cd=6&source=gbs_api");"></div>
Но в браузере (Chrome) эти изображения не будут отображаться привсе, и в консоли я нахожу это сообщение:
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://books.google.com/books?id=jAUODAAAQBAJ&printsec=frontcover&dq=king&hl=&cd=8&source=gbs_api with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.
Мой вопрос: как я могу обойти это, то есть отображать фоновые изображения, полученные из URL-адресов для всех, кто загружает сайт?