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

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

0 голосов
/ 17 октября 2019

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

Карты в настоящее время загружают изображениеЕСЛИ API-интерфейс предоставляет миниатюрный URL-адрес, но если миниатюрный URL-адрес не предоставлен, то я хотел установить замещающее изображение, которое будет отображаться на его месте. На следующем изображении показано, как карты в настоящее время установлены с + без URL-адреса миниатюр: enter image description here

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

Код для создания карты следующий: 

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) => void;
  editProduct: (id: any, title: string, url: string, thumbnail: string) => void;
}

interface State {
  title: string;
  thumbnail: string;
  id: string;
  url: string;
  imageLoading?: boolean;
  tooManyRequests?: boolean;
}

export default class HelpCard extends Component<Props, State> {
  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 (
      <React.Fragment>
        <article className="card card--2">
          <div className="card__img">
            {this.state.imageLoading ? <img src={placeholder} style={{ width: "100%", height: "100%" }}></img> : null}
            <img
              className="Sprite"
              onLoad={() => this.setState({ imageLoading: false })}
              onError={() => this.setState({ tooManyRequests: false })}
              src={this.state.thumbnail}
            />
          </div>

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

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

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

1 Ответ

1 голос
/ 17 октября 2019

Вы пытаетесь импортировать двоичный файл как переменную. Чтобы это работало, вам нужно проверить, настроен ли ваш веб-пакет на то же самое с соответствующим загрузчиком файлов. Ваш webpack.config.js должен иметь что-то вроде этого: 

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};
...