从 React 中的 json 文件数据中搜索过滤器

Question

我已经为 React 构建了一个搜索过滤器。 JSON 文件存储模型的名称和图像。出现错误，例如可以在网站上显示名称但无法读取图像。 我的代码在这里https://codesandbox.io/s/search-filter-in-reactjs-forked-k8nrf?file=/src/Search/index.js

import React, { Component } from "react";
import {
  Input,
  Card,
  CardBody,
  CardTitle
} from "mdbreact";

import "./style.css";
import modelList from "./models.json";

class App extends Component {
  state = {
    search: ""
  };

  renderModel = model => {

    return (
      <div className="col-md-3" style={{ marginTop: "20px" }}>
        <Card>
          <CardBody>
            <p className="">
              <img
                src={model.image}
                className={model.image}
                alt={model.name}
              />
            </p>
            <CardTitle title={model.name}>
              {model.name.substring(0, 15)}
              {model.name.length > 15 && "..."}
            </CardTitle>
          </CardBody>
        </Card>
      </div>
    );
  };

  onchange = e => {
    this.setState({ search: e.target.value });
  };

  render() {
    const { search } = this.state;
    const filteredModels = modelList.filter(model => {
      return model.name.toLowerCase().indexOf(search.toLowerCase()) !== -1;
    });

    return (
      <div className="flyout">
        <main style={{ marginTop: "4rem" }}>
          <div className="container">
            <div className="row">
              <div className="col">
                <Input
                  label="Search Model"
                  icon="search"
                  onChange={this.onchange}
                />
              </div>
              <div className="col" />
            </div>
            <div className="row">
              {filteredModels.map(model => {
                return this.renderModel(model);
              })}
            </div>
          </div>
        </main>
       
      </div>
    );
  }
}

export default App;

有人可以帮我在网站上以 JSON 格式显示图像吗？非常感谢

Answer 1

只需将图像移动到您的公用文件夹，这样它们就不会在启动时全部加载，而是仅在需要时加载。

您可以按原样移动整个文件夹。

<img src会自动搜索公用文件夹中的图片，如果你在url前面加上/：

[
  {
    "name": "Sample 1",
    "image": "/asset/crab-nebuala.png"
  },
  {
    "name": "Sample 2",
    "image": "/asset/crab-nebula.png"
  },
  {
    "name": "Sample 3",
    "image": "/asset/ghost-nebua.png"
  },
  {
    "name": "Sample 4",
    "image": "/asset/sample-nebula-2.png"
  },
  {
    "name": "Sample 5",
    "image": "/asset/sample-nebula.png"
  }
]

这就是你所需要的。这是您更新后的sandbox。