My web app is not rendering images from my array of objects. I tried the require method with no luck. Here is my folder structure
My array looks like this right now. I don't know if its the folder path that's wrong but it looks relatively correct so if I need to use the require method somehow, how would that change my path name
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'
}
]
and the page that dynamically renders this looks like this
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>
)
}
