menu
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 3 months 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