I deployed my Next.js app on Netlify, when it comes to the dynamic routes the images are not being found. The images are stored in the public folder and there location is sent via query params. On my dev server the images are loading correctly, as well as on if I deploy it on Vercel. For some reason I don’t understand why this error is only occurring only on Netlify.
Also the information for the dynamic pages are stored and being read from a JSON file like this
JSON file example
{
"id": 1,
"brand": "Tecna",
"name": "Tecna Stud Welding Machine 1500 Amps",
"year": null,
"description": "The Tecna Stud Welding Machine is a high-powered welding machine capable of delivering 1500 Amps of current. It is designed for heavy-duty industrial applications and provides precise and reliable stud welding for various metal fabrication projects.",
"imageSrc": "/images/inventory/tecnaStudWelder/tecna_studwelder.png",
"tags": ["Tecna", "Stud Welding", "1500 Amps"],
"cardDetails": "High-powered welding machine for precise stud welding",
"specs": [
"Current Output: 1500 Amps",
"Application: Heavy-dusty industerial welding",
"Welding Type: Stud welding",
"Precision: High",
"Metal Compatibility: Various metals"
],
"productImages": [
"/image`your text`s/inventory/tecnaStudWelder/tecna_studwelder.png",
"/images/inventory/tecnaStudWelder/0.png",
"/images/inventory/tecnaStudWelder/1.png",
"/images/inventory/tecnaStudWelder/2.png",
"/images/inventory/tecnaStudWelder/3.png",
"/images/inventory/tecnaStudWelder/4.png",
"/images/inventory/tecnaStudWelder/5.png",
"/images/inventory/tecnaStudWelder/6.png",
"/images/inventory/tecnaStudWelder/7.png",
"/images/inventory/tecnaStudWelder/8.png",
"/images/inventory/tecnaStudWelder/9.png"
],
"detailedDescription": "The Tecna Stud Welding Machine is a high-powered welding machine capable of delivering 1500 Amps of current. It is specifically designed for heavy-duty industrial applications that require precise and reliable stud welding. This machine offers advanced features such as adjustable welding parameters, easy-to-use controls, and a robust construction that ensures long-lasting performance. With its exceptional power output and precise stud welding capabilities, it is suitable for a wide range of metal fabrication projects in industries such as automotive, construction, and manufacturing."
},
Here is how my public folder is structured
Dynamic Page Code
"use client";
import { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { ProductPhoto } from "./productPhoto";
import EmailForm from "../emailForm";
import { ProductSpecs } from "./productSpecs";
import { Metadata } from "next";
interface IProps {
id: number;
name: string;
year: number | null;
description: string;
imageSrc: string;
tags: string[];
productImages: string[];
cardDetails: string;
detailedDescription: string;
specs: string[];
}
const RobotDetails = (context: any) => {
const {
title,
brand,
description,
tags,
cardDetails,
detailedDescription,
year,
specs
} = context.searchParams;
const imageSrc = context.searchParams.photo;
const productImages = context.searchParams.productImages;
const [activeImage, setActiveImage] = useState(imageSrc);
const [showForm, setShowForm] = useState(false);
useEffect(() => {}, [activeImage]);
const handleRequestQuote = () => {
setShowForm(true);
};
const handleCloseForm = () => {
setShowForm(false);
};
return (
<>
<section className="flex flex-col gap-16 py-10">
<div className="container mx-auto flex flex-col md:flex-row">
<div className="w-screen">
<ProductPhoto imagesList={productImages} />
</div>
<div className="flex flex-col gap-3 md:ml-8 px-4">
<p className="text-gray-500">
{"/inventory"}
<Link href="/product"></Link>
{`/${title}`}
</p>
<h2 className="text-4xl">{title.slice(0, 30)}</h2>
<span className="font-semibold">
Price: <span className="">Please Contact For Quote</span>
</span>
<span className="font-semibold">Brand: {brand}</span>
<div className="flex flex-col gap-2">
<h1 className="text-2xl">Key features</h1>
<p className="text-gray-800">{detailedDescription}</p>
</div>
<h3 className="flex justify-between text-gray-700 text-lg">
<span>Category: </span>
</h3>
<h3 className="flex justify-between text-gray-700 text-lg">
<span>Specs: </span>
</h3>
<button
onClick={handleRequestQuote}
className="bg-red-600 text-sky-50 px-2 py-1 mt-4"
>
Request Quote
</button>
</div>
</div>
</section>
{showForm && (
<EmailForm onClose={handleCloseForm} subject={title} /> )}
</>
);
};
export default RobotDetails;
Would appreciate any help!
The error I am getting in the console on Netlify is a 404 not found error. After browsing different solutions on this site not seem to be working for me, I’ve tried changing the img src, I’ve also appended the / character to my starting img src. Right now it’s important the images are in the public folder, a solution I am trying is to find a host where I can store the images and update my JSON
Here is my site deployed https://tubular-blancmange-e97064.netlify.app/
As well as my repository for context: https://github.com/wal238/robotstrading