Javascript 占位符图像未正确加载卡[ReactJs]

所以我正在做一个项目，加载一个卡片列表，从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>

import React，{Component}来自“React”；
导入“./help/HelpCardTwo.css”；
导入“./帮助/帮助列表”；
从“reactjs弹出窗口”导入弹出窗口；
从“./help/placeholder.jpeg”导入占位符；
界面道具{
id：字符串；
url:string；
标题：字符串；
缩略图：字符串；
deleteProduct：（id:any）=>无效；
editProduct:（id:any，title:string，url:string，缩略图：string）=>void；
}
界面状态{
标题：字符串；
缩略图：字符串；
id：字符串；
url:string；
imageLoading？：布尔值；
tooManyRequests？：布尔值；
}
导出默认类帮助卡扩展组件{
状态={
url:“”，
id:“”，
标题：“，
图像加载：对，
tooManyRequests:错误，
缩略图：“
};
componentDidMount（）{
const{url，title，thumbnail}=this.props；
const id=url.split（“/”[url.split（“/”）.length-2]；
这是我的国家({
网址，
身份证件
标题
缩略图，
图像加载：对，
tooManyRequests:错误
});
}
render（）{
const isThumbnail=this.state.thumbnail；
const adminhelpcard=this.state；
返回(
{this.state.imageLoading？：null}

显示的代码仅用于卡的图像部分，而不是其余部分。如果还需要其他内容，请告诉我，我将提供代码

如何在没有小误差方块的情况下正式加载占位符图像

---

提前感谢您

您正在尝试将二进制文件作为变量导入。为此，您需要检查您的网页是否配置了相应的文件加载器。 您的webpack.config.js应该有如下内容：

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

---

你这么说是什么意思？因为我似乎找不到webpack.config.ts，所以我想说的是，如果你没有为png、jpeg、gif等图像文件配置文件加载器。在捆绑工具中，你无法使用变量访问.jpeg文件内容。请尝试使用以下方法：从“./help/placeholder.jpeg”导入*作为占位符；将导入更改为您所做的，这会使我的操作中出现以下错误，如下所示：类型“typeof import（*.jpeg”）”不可分配给类型“string”.ts（2322）