javascript — изображение заполнителя не загружается должным образом с картами [ReactJs]

Изображение заполнителя не загружается должным образом с картами [ReactJs]

поэтому я работаю над проектом, который загружает список карточек, которые получают данные из API, такие как «Id, title, URL и thumbnail URL».

Карты в настоящее время загружают изображение, если URL-адрес миниатюры предоставляется API, но если URL-адрес миниатюры не предоставлен, то я хотел установить изображение-заполнитель, которое будет отображаться на его месте. На следующем изображении показано, как в данный момент для карточек задано без URL-адреса миниатюр: введите описание изображения здесь

Как вы можете видеть, в настоящее время есть заполненное изображение, которое я настроил, но по какой-то причине есть раздел «ошибка», который загружается под заполнителем, что означает, что изображение не предоставляется в разделе изображения. Мне было интересно, как я могу официально заявить, что это изображение-заполнитель, чтобы использовать его без необходимости жесткого кодирования изображения на карту?

Код для создания карты выглядит следующим образом:

 import React, { Component } from "react"; import "../help/HelpCardTwo.css"; import "../help/HelpList"; import Popup from "reactjs-popup"; import placeholder from "../help/placeholder.jpeg"; interface Props { id: string; url: string; title: string; thumbnail: string; deleteProduct: (id: any) ={amp}gt; void; editProduct: (id: any, title: string, url: string, thumbnail: string) ={amp}gt; void; } interface State { title: string; thumbnail: string; id: string; url: string; imageLoading?: boolean; tooManyRequests?: boolean; } export default class HelpCard extends Component{amp}lt;Props, State{amp}gt; { state = { url: "", id: "", title: "", imageLoading: true, tooManyRequests: false, thumbnail: "" }; componentDidMount() { const { url, title, thumbnail } = this.props; const id = url.split("/")[url.split("/").length - 2]; this.setState({ url, id, title, thumbnail, imageLoading: true, tooManyRequests: false }); } render() { const isThumbnail = this.state.thumbnail; const adminhelpcard = this.state; return ( {amp}lt;React.Fragment{amp}gt; {amp}lt;article className="card card--2"{amp}gt; {amp}lt;div className="card__img"{amp}gt; {this.state.imageLoading ? {amp}lt;img src={placeholder} style={{ width: "100%", height: "100%" }}{amp}gt;{amp}lt;/img{amp}gt; : null} {amp}lt;img className="Sprite" onLoad={() ={amp}gt; this.setState({ imageLoading: false })} onError={() ={amp}gt; this.setState({ tooManyRequests: false })} src={this.state.thumbnail} /{amp}gt; {amp}lt;/div{amp}gt; 

Показанный код предназначен только для части изображения карты, а не для всего остального. Если что-то еще нужно, пожалуйста, дайте мне знать, и я предоставлю код.

Как я могу официально загрузить изображение-заполнитель, не имея маленького квадрата ошибки под ним?

заранее спасибо

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector