search

zooniverse / front-end-monorepo

A rebuild of the front-end for zooniverse.org
https://www.zooniverse.org
Apache License 2.0
105 stars 30 forks source link

Placeholder images aren't loading in dev env #4294

Closed goplayoutside3 closed 3 weeks ago

goplayoutside3 commented 1 year ago

Package

app-project

Describe the bug

Placeholder images for components like TeamMember and RecentSubjects do not load simple-avatar.png and subject-placeholder.png when app-project is run in a dev environment.

To Reproduce

Check out the latest in FEM on your local machine. Run yarn bootstrap then either yarn dev or yarn start.

Vist a project's About > Team page such as https://local.zooniverse.org:3000/projects/brooke/i-fancy-cats/about/team

Expected behavior

Assets in the /public folder of app-project or app-content-pages should load in a browser in a dev environment and on production.

Discovered during review of https://github.com/zooniverse/front-end-monorepo/pull/4292

eatyourgreens commented 1 year ago

If those components are using next/image, they should pick up the app basePath. If not, then that might be the problem.

eatyourgreens commented 1 year ago

Placeholders are broken in a production build too. Here’s the Recent Classifications box on the Classify page showing a broken image.

https://www.zooniverse.org/projects/nora-dot-eisner/planet-hunters-tess/classify/workflow/11235

Screenshot of the Recent Classifications box showing a broken image icon rather than a placeholder for an empty subject.

The URL for each of those placeholders isn't a valid image, possibly because next/image is ignoring the app basePath when it constructs the image URL.

eatyourgreens commented 1 year ago

The placeholder for team members is hosted outside the NextJS app, on static.zooniverse.org. That explains why it doesn't show up in local development. Here's the URL (from the PH-TESS team page.) https://static.zooniverse.org/www.zooniverse.org/assets/simple-avatar.png

There’s a copy of that file hosted as a static asset with the NextJS app, which is slightly confusing. This file isn’t being used, in production.

https://fe-project.preview.zooniverse.org/projects/assets/simple-avatar.png

goplayoutside3 commented 9 months ago

Both components use Next.js publicRuntimeConfig which is now deprecated.

eatyourgreens commented 9 months ago

Placeholder images are still broken in production too. ☹️

They've been broken for at least a year now.

https://github.com/zooniverse/front-end-monorepo/issues/4294#issuecomment-1449688264

In production, the error from next/image is:

"url" parameter is valid but upstream response is invalid

eatyourgreens commented 4 months ago

Next.js static assets are also broken if you bypass the nginx proxy. Maybe the problem is a combination of next/image and Next.js middleware?

https://fe-project.zooniverse.org/projects/_next/image?url=%2Fassets%2Fsubject-placeholder.png&w=1080&q=75

Requests for _next/image should be passed through here: https://github.com/zooniverse/front-end-monorepo/blob/2868dc8007ddb4495febab067494d2689b70e326/packages/app-project/middleware.js#L13-L24