如何从数组中渲染图像

Question

我的网络应用程序没有从我的对象数组中渲染图像。我尝试了require 方法，但没有成功。这是我的文件夹结构

我的数组现在看起来像这样。我不知道它是否是错误的文件夹路径，但它看起来相对正确，所以如果我需要以某种方式使用 require 方法，那将如何更改我的路径名

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>
    )
}

Answer 1

i found this it may help

尝试将require 放入projects 就像mockup: require('../pages/images/savona.png'), 一样