问如何从数组中呈现图像

EN

export const Projects = [
    {
        id: "intuition",
        name: "inTuition website",
        tags: ["Financial Markets", "Express", "Mongo DB"],
        description: "Team App was a concept project for a team communication website. I made it through Webflow and took advantage of their powerful CMS platform to create a blog section that management can update on their timeline without a developer. This Application is fully responsive and highlights the foundational principles behind a reliable website for a growing company.",
        pageDescription: "Intuition is an online global money transfer application for international students who want a faster, and more secure way to transfer money from their home nation to their school. inTuition is commited to developing inovative technologies that make the global financial markets more convinient for end users.",
        thumbnail: '../pages/images/team2.png',
        mockup: '../pages/images/team-fs.jpg',
        link: '/experience/intuition'
    },
    {
        id: "savona",
        name: "Savona website",
        tags: ["Restaurant", "Webflow", "Content-Management-System"],
        description: "Savona is a local pizza restaurant in Calgary that serves the most delicious pizza, and I am excited to build their first website. I designed a modern website that reenforces Savona's culture, brand and identity. I integrated a robust online ordering process using moduurn to enable customers to order online and add a new avenue of revenue for the company",
        pageDescription: "Savona is a local pizza restaurant in Calgary that serves the most delicious pizza, and I am excited to build their first website. I designed a modern website that reenforces Savona's culture, brand and identity. I integrated a robust online ordering process using moduurn to enable customers to order online and add a new avenue of revenue for the company",
        thumbnail: "../pages/images/savona-thumbnail.png",
        mockup: '../pages/images/savona.png',
        link: '/experience/savona'
    },
    {
        id: "teamapp",
        name: "Team App website",
        tags: ["Concept", "Responsive", "Blog"],
        description: "Team App was a concept project for a team communication website. I made it through Webflow and took advantage of their powerful CMS platform to create a blog section that management can update on their timeline without a developer. This Application is fully responsive and highlights the foundational principles behind a reliable website for a growing company.",
        pageDescription: "Team App was a concept project for a team communication website. I made it through Webflow and took advantage of their powerful CMS platform to create a blog sect",
        thumbnail: '../pages/images/team2.png',
        mockup: '../pages/images/team-fs.jpg',
        link: '/experience/teamapp'
    }
]

import React from "react";
import Footer from '../components/Footer'
import Navbar from '../components/Navbar'
import { Projects } from '../Database/Projects'


export default function ExperiencePage({ match }) {
    function expPlace(exp) {
        return exp.id === match.params.id
    }

    const place = Projects.find(expPlace)

    return (
        <div>
            <div class="header">
                <Navbar />
                <div class="header-wrapper">
                    <div class="container center">
                        <h4>project showcase</h4>
                        <h1>{place.id}</h1>
                        <p class="header-paragraph">{place.pageDescription}</p>
                        {/* <a href="#" class="live-site-link yellow-link">visit live site →</a> */}
                    </div>
                </div>
            </div>
            <div class="section">
                <div class="screen-container">
                    <img alt="A screenshot of web page" src={place.mockup} class="screen-image" />
                </div>
            </div>
            <Footer />
        </div>
    )
}