gjcampbell/personal_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use PUBLIC_URL for public image paths to ensure deployed images resolve correctly

Browse Source
This commit is contained in:
Gregory Campbell
2026-06-03 22:53:30 -04:00
parent 4e6127a953
commit 0feb8cd497
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Home.js
+2 -2
View File
@@ -25,8 +25,8 @@ export const Home = () => {
<section> <section>
<img <img
src="/images/Me-640.webp" src={`${process.env.PUBLIC_URL}/images/Me-640.webp`}
srcSet="/images/Me-320.webp 320w, /images/Me-640.webp 640w, /images/Me-1024.webp 1024w" srcSet={`${process.env.PUBLIC_URL}/images/Me-320.webp 320w, ${process.env.PUBLIC_URL}/images/Me-640.webp 640w, ${process.env.PUBLIC_URL}/images/Me-1024.webp 1024w`}
sizes="(max-width: 600px) 100vw, 640px" sizes="(max-width: 600px) 100vw, 640px"
alt="Portrait of Gregory Campbell" alt="Portrait of Gregory Campbell"
className="homeimage" className="homeimage"
src/Resume.js
+2 -2
View File
@@ -26,8 +26,8 @@ export const Resume = () => {
<section> <section>
<h2>Written Resume</h2> <h2>Written Resume</h2>
<img <img
src="/images/Resume-640.webp" src={`${process.env.PUBLIC_URL}/images/Resume-640.webp`}
srcSet="/images/Resume-320.webp 320w, /images/Resume-640.webp 640w, /images/Resume-1024.webp 1024w" srcSet={`${process.env.PUBLIC_URL}/images/Resume-320.webp 320w, ${process.env.PUBLIC_URL}/images/Resume-640.webp 640w, ${process.env.PUBLIC_URL}/images/Resume-1024.webp 1024w`}
sizes="(max-width: 600px) 100vw, 640px" sizes="(max-width: 600px) 100vw, 640px"
alt="Resume preview" alt="Resume preview"
loading="lazy" loading="lazy"
src/components/ProjectCard.js
+2 -2
View File
@@ -2,10 +2,10 @@ import React from 'react';
export const ProjectCard = ({ title, description, imgSrc, imgName, imgAlt, link, children }) => { export const ProjectCard = ({ title, description, imgSrc, imgName, imgAlt, link, children }) => {
const webpSources = imgName const webpSources = imgName
? `/images/${imgName}-320.webp 320w, /images/${imgName}-640.webp 640w, /images/${imgName}-1024.webp 1024w` ? `${process.env.PUBLIC_URL}/images/${imgName}-320.webp 320w, ${process.env.PUBLIC_URL}/images/${imgName}-640.webp 640w, ${process.env.PUBLIC_URL}/images/${imgName}-1024.webp 1024w`
: null; : null;
const srcFallback = imgName ? `/images/${imgName}-640.webp` : imgSrc; const srcFallback = imgName ? `${process.env.PUBLIC_URL}/images/${imgName}-640.webp` : imgSrc;
return ( return (
<article className="project-card"> <article className="project-card">