javascript - 占位符图像无法通过卡片正确加载 [ReactJs]

Question

所以我正在开发一个项目，该项目加载一个卡片列表，该列表从 API 获取数据，例如“Id、标题、URL 和缩略图 URL”。

如果 API 提供了缩略图 URL，卡片当前会加载图像，但如果未提供缩略图 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) => 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>

显示的代码仅适用于卡片的图像部分，不适用于卡片的其余部分。如果还需要任何其他信息，请告诉我，我将提供代码。

如何正式加载占位符图像，同时其下没有小错误方 block ？

提前谢谢

Answer 1

您正在尝试将二进制文件作为变量导入。为此，您需要检查您的 webpack 是否配置为具有正确的文件加载器。 你的 webpack.config.js 应该有这样的内容:

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