我的项目遇到了一个问题，JSON 文件中的所有内容都可以在网站上使用，除了图片，我无法让图片显示在网站上，我不知道该怎么办。

我看了看代码，一切似乎都正确……我确定我做错了什么，但我不知道是什么

 import React, { useState } from "react";
 import data from "../data.json";
    
    const Destination = () => {
      const [planets] = useState(data.destinations);
      const [value, setValue] = useState(0);
    
      const { name, images, description, distance, travel } = planets[value];
    
      return (
        <div className="h-screen p-6 font-main bg-dest-m bg-no-repeat bg-cover text-white lg:flex lg:bg-dest-d ">
          <div className="text-center lg:w-1/2 lg:flex lg:flex-col lg:justify-center">
            <h1 className="lg:text-3xl tracking-widest md:text-2xl md:pt-10">
              01 PICK YOUR DESTINATION
            </h1>
            <img src={images.png} alt={name} className="h-48" />
          </div>
          <div className="lg:w-1/2  lg:px-24 lg:flex lg:flex-col lg:justify-center md:px-24">
            <div className="flex justify-around items-center px-8 my-10 text-gray-400 lg:w-3/4 lg:px-0 md:px-40">
              {planets.map((planet, index) => {
                return (
                  <button key={index} onClick={() => setValue(index)}>
                    {planet.name}
                  </button>
                );
              })}
            </div>
            <h1 className="text-center my-5 text-6xl lg:text-left">{name}</h1>
            <p className="text-center my-4 lg:text-left text-gray-400">
              {description}
            </p>
            <div className="w-full bg-gray-500 h-px my-8"></div>
            <div className="lg:flex lg:justify-between lg:items-center lg:w-2/3 lg:mt-8 ">
              <div className="text-center text-lg lg:text-left">
                <p className="text-sm text-gray-400">AVG. DISTANCE</p>
                <p className="text-2xl">{distance}</p>
              </div>
              <div className="text-center mt-6 text-lg lg:text-left lg:mt-0 ">
                <p className="text-sm text-gray-400">AVG. TRAVEL</p>
                <p className="text-2xl">{travel}</p>
              </div>
            </div>
          </div>
        </div>
      );
    };
    
    export default Destination;

JSON 文件

这是 JSON 文件，希望它有帮助

{
  "destinations": [
    {
      "name": "Moon",
      "images": {
        "png": "./assets/destination/image-moon.png",
        "webp": "./assets/destination/image-moon.webp"
      },
      "description": "See our planet as you’ve never seen it before. A perfect relaxing trip away to help regain perspective and come back refreshed. While you’re there, take in some history by visiting the Luna 2 and Apollo 11 landing sites.",
      "distance": "384,400 km",
      "travel": "3 days"
    },
    {
      "name": "Mars",
      "images": {
        "png": "./assets/destination/image-mars.png",
        "webp": "./assets/destination/image-mars.webp"
      },
      "description": "Don’t forget to pack your hiking boots. You’ll need them to tackle Olympus Mons, the tallest planetary mountain in our solar system. It’s two and a half times the size of Everest!",
      "distance": "225 mil. km",
      "travel": "9 months"
    },
    {
      "name": "Europa",
      "images": {
        "png": "./assets/destination/image-europa.png",
        "webp": "./assets/destination/image-europa.webp"
      },
      "description": "The smallest of the four Galilean moons orbiting Jupiter, Europa is a winter lover’s dream. With an icy surface, it’s perfect for a bit of ice skating, curling, hockey, or simple relaxation in your snug wintery cabin.",
      "distance": "628 mil. km",
      "travel": "3 years"
    },
    {
      "name": "Titan",
      "images": {
        "png": "./assets/destination/image-titan.png",
        "webp": "./assets/destination/image-titan.webp"
      },
      "description": "The only moon known to have a dense atmosphere other than Earth, Titan is a home away from home (just a few hundred degrees colder!). As a bonus, you get striking views of the Rings of Saturn.",
      "distance": "1.6 bil. km",
      "travel": "7 years"
    }
  ],
  "crew": [
    {
      "name": "Douglas Hurley",
      "images": {
        "png": "./assets/crew/image-douglas-hurley.png",
        "webp": "./assets/crew/image-douglas-hurley.webp"
      },
      "role": "Commander",
      "bio": "Douglas Gerald Hurley is an American engineer, former Marine Corps pilot and former NASA astronaut. He launched into space for the third time as commander of Crew Dragon Demo-2."
    },
    {
      "name": "Mark Shuttleworth",
      "images": {
        "png": "./assets/crew/image-mark-shuttleworth.png",
        "webp": "./assets/crew/image-mark-shuttleworth.webp"
      },
      "role": "Mission Specialist",
      "bio": "Mark Richard Shuttleworth is the founder and CEO of Canonical, the company behind the Linux-based Ubuntu operating system. Shuttleworth became the first South African to travel to space as a space tourist."
    },
    {
      "name": "Victor Glover",
      "images": {
        "png": "./assets/crew/image-victor-glover.png",
        "webp": "./assets/crew/image-victor-glover.webp"
      },
      "role": "Pilot",
      "bio": "Pilot on the first operational flight of the SpaceX Crew Dragon to the International Space Station. Glover is a commander in the U.S. Navy where he pilots an F/A-18.He was a crew member of Expedition 64, and served as a station systems flight engineer."
    },
    {
      "name": "Anousheh Ansari",
      "images": {
        "png": "./assets/crew/image-anousheh-ansari.png",
        "webp": "./assets/crew/image-anousheh-ansari.webp"
      },
      "role": "Flight Engineer",
      "bio": "Anousheh Ansari is an Iranian American engineer and co-founder of Prodea Systems. Ansari was the fourth self-funded space tourist, the first self-funded woman to fly to the ISS, and the first Iranian in space."
    }
  ],
  "technology": [
    {
      "name": "Launch vehicle",
      "images": {
        "portrait": "./assets/technology/image-launch-vehicle-portrait.jpg",
        "landscape": "./assets/technology/image-launch-vehicle-landscape.jpg"
      },
      "description": "A launch vehicle or carrier rocket is a rocket-propelled vehicle used to carry a payload from Earth's surface to space, usually to Earth orbit or beyond. Our WEB-X carrier rocket is the most powerful in operation. Standing 150 metres tall, it's quite an awe-inspiring sight on the launch pad!"
    },
    {
      "name": "Spaceport",
      "images": {
        "portrait": "./assets/technology/image-spaceport-portrait.jpg",
        "landscape": "./assets/technology/image-spaceport-landscape.jpg"
      },
      "description": "A spaceport or cosmodrome is a site for launching (or receiving) spacecraft, by analogy to the seaport for ships or airport for aircraft. Based in the famous Cape Canaveral, our spaceport is ideally situated to take advantage of the Earth’s rotation for launch."
    },
    {
      "name": "Space capsule",
      "images": {
        "portrait": "./assets/technology/image-space-capsule-portrait.jpg",
        "landscape": "./assets/technology/image-space-capsule-landscape.jpg"
      },
      "description": "A space capsule is an often-crewed spacecraft that uses a blunt-body reentry capsule to reenter the Earth's atmosphere without wings. Our capsule is where you'll spend your time during the flight. It includes a space gym, cinema, and plenty of other activities to keep you entertained."
    }
  ]
}