Search Filter from json file data in React

Question

I have built a search filter to React. The JSON file stores the name and the image of the model. There is an error like the name can be displayed on the website but the image is not read. My code is here 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;

Can someone stop by to help me display the image on JSON on the website? Thanks a lot

Answer 1

Just move the images to your public folder, so that they are not all loaded on startup but only if needed.

You can just move the whole folder like it is.

<img src will automatically search for images in the public folder, if you add a / in front of the 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"
  }
]

That's all you need. Here is your updated sandbox .