Include dynamic loading of illustration images.

Dockerfile

@@ -1,10 +1,7 @@
-# Step 1: Build the app in a node.js environment
 FROM node:18 as build
 
-# Set working directory
 WORKDIR /app
 
-# Add `node_modules/.bin` to $PATH
 ENV PATH /app/node_modules/.bin:$PATH
 
 # Set VITE_APP_API_URL variable
@@ -16,14 +13,14 @@ COPY package*.json ./
 RUN npm install
 COPY . .
 
-# Create a production build
 RUN npm run build
 
+
 # Step 2: Serve the app on Nginx
 FROM nginx:stable-alpine
 
-# Copy the build output to replace the default nginx contents
 COPY --from=build /app/dist /usr/share/nginx/html
+COPY public/ /usr/share/nginx/html/
 
 # Expose port 80
 EXPOSE 80

src/components/Question.tsx

@@ -22,13 +22,9 @@ const Question: React.FC<QuestionProps> = ( {quizState, setQuizState, indicateAn
 
     useEffect(() => {
         setStartTime(Date.now()); // Update start time whenever the question changes
-
-		(async () => {
-			const questionId = quizState.quizQuestions[quizState.questionIndex].id;
-			const src = `../assets/ai_generated/illustration_${questionId}.png`;
-			const imageModule = await import(/* @vite-ignore */ src);
-			setIllustrationSrc(imageModule.default);
-		})();
+		const questionId = quizState.quizQuestions[quizState.questionIndex].id;
+		const src = `/img/ai_gen/illustration_${questionId}.png`;
+		setIllustrationSrc(src);
     }, [quizState.questionIndex]);	
 
 	const answerQuestion = async ( yesAnswered: boolean): Promise<void> => {