在 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會自動搜索public文件夾中的圖片，如果你在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"
  }
]

這就是你所需要的。 這是您更新的沙箱。