menu

ZEIT

Our mission is to make cloud computing as easy and accessible as mobile computing. You can find our Next.js community here.

Channels
Team

Images not showing on CRA deployment

March 22, 2019 at 4:08am

Images not showing on CRA deployment

March 22, 2019 at 4:08am (Edited 1 month ago)

Hi Now community - newbie question. Please help.

I followed directions to deploy a CRA. They deployment went through okay, but images are broken.

I am trying to load the img with this property: src='images/stay-focused.jpg'

also tried src='./images/stay-focused.jpg'

The images seem to be uploaded to Now. And I see them in the Output folder.

What am I doing wrong?


March 22, 2019 at 11:00pm

Can anyone help with this, please?

  • reply
  • like

Can you post your now.json and the "Output" section of /_src?

  • reply
  • like

If you can, do a public deployment: now --public.

  • reply
  • like

I will take a look and suggest changes tomorrow. Need to sleep!

  • reply
  • like

Thx. Sleep well! So many people need sharp Paulo mind well rested tomorrow!

like-fill
1
  • reply
  • like

March 23, 2019 at 5:00pm

Your now.json should be:

{
"version": 2,
"name": "onTap!",
"builds": [
{
"src": "package.json",
"use": "@now/static-build",
"config": { "distDir": "build" }
}
],
"routes": [
{
"src": "/static/(.*)",
"headers": { "cache-control": "s-maxage=31536000,immutable" },
"dest": "/static/$1"
},
{
"src": "/images/(.*)",
"headers": { "cache-control": "s-maxage=31536000,immutable" },
"dest": "/images/$1"
},
{ "src": "/favicon.ico", "dest": "/favicon.ico" },
{ "src": "/asset-manifest.json", "dest": "/asset-manifest.json" },
{ "src": "/manifest.json", "dest": "/manifest.json" },
{ "src": "/precache-manifest.(.*)", "dest": "/precache-manifest.$1" },
{
"src": "/service-worker.js",
"headers": { "cache-control": "s-maxage=0" },
"dest": "/service-worker.js"
},
{
"src": "/(.*)",
"headers": { "cache-control": "s-maxage=0" },
"dest": "/index.html"
}
]
}

Basically, you should check the "Output" section on /_src to see if all assets are covered by your routes. Let me know if it doesn't work.

Edited
  • reply
  • like

That was it! There was no route for the /images folder. So I added this block:

  • reply
  • like
{
"src": "/images/(.*)",
"headers": {
"cache-control": "s-maxage=31536000,immutable"
},
"dest": "/images/$1"
},
  • reply
  • like

to the now.json.

  • reply
  • like

May I suggest, that the web page that provides instructions to deploy a CRA should include this in the example now.json that it shows? The page is here:

  • reply
  • like

Thank you, Paulo.

  • reply
  • like

You can open a new issue in now-examples so we can discuss if it is a good idea or not.

  • reply
  • like

March 24, 2019 at 11:34pm

Can't figure out how and where to open an issue. Can you point me, please?

  • reply
  • like