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

Use public URL fallback to relative paths for public images

Browse Source
This commit is contained in:
Gregory Campbell
2026-06-03 23:01:54 -04:00
parent 9244e6ea7c
commit 62bb8f3574
3 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Home.js
+4 -2
View File
@@ -2,6 +2,8 @@ import React from 'react';
import { Helmet } from 'react-helmet-async'; import { Helmet } from 'react-helmet-async';
export const Home = () => { export const Home = () => {
const publicUrl = process.env.PUBLIC_URL || '.';
return ( return (
<main className="home-page"> <main className="home-page">
<Helmet> <Helmet>
@@ -25,8 +27,8 @@ export const Home = () => {
<section> <section>
<img <img
src={`${process.env.PUBLIC_URL}/images/Me-640.webp`} src={`${publicUrl}/images/Me-640.webp`}
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`} srcSet={`${publicUrl}/images/Me-320.webp 320w, ${publicUrl}/images/Me-640.webp 640w, ${publicUrl}/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={`${process.env.PUBLIC_URL}/images/Resume-640.webp`} src={`${process.env.PUBLIC_URL || '.'}/images/Resume-640.webp`}
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`} 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
+3 -2
View File
@@ -1,11 +1,12 @@
import React from 'react'; 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 publicUrl = process.env.PUBLIC_URL || '.';
const webpSources = imgName const webpSources = imgName
? `${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` ? `${publicUrl}/images/${imgName}-320.webp 320w, ${publicUrl}/images/${imgName}-640.webp 640w, ${publicUrl}/images/${imgName}-1024.webp 1024w`
: null; : null;
const srcFallback = imgName ? `${process.env.PUBLIC_URL}/images/${imgName}-640.webp` : imgSrc; const srcFallback = imgName ? `${publicUrl}/images/${imgName}-640.webp` : imgSrc;
return ( return (
<article className="project-card"> <article className="project-card">