0

I have a list of webpages example.com/object/140, example.com/object/141, example.com/object/142, ...

and each page should have a particular background image example.com/assets/images/object/140.jpg, example.com/assets/images/object/141.jpg, ...

Some images are missing and then I use a default image. In that case, when I check if the image exists, I get a 404 error. I have already seen in several pages there isn't a direct way to avoid this problem.

Then I did the following: I created a service in the backend (C#) that checks if the file exists File.Exists(fileName);. That way I managed to avoid this error in my localhost. So far so good.

Now I published both my frontend and backend in two different services in Azure. The images are in the frontend but the file service is in the backend. My method does not work anymore because I can't access directly the frontend folders from the backend. One solution could be to make an http call from the backend to the frontend, but I think this doesn't make much sense, it's getting too messy.

One option could be to store in the DB a boolean with the (non)existence information, but I think this is prone to inconsistencies (if the boolean is not updated immediately when a new image is loaded or deleted, for example), even if I run a daily job to clean it.

Still another option could be to store the images directly in the DB and retrieve them together with the DTOs of the objects I'm loading in each particular page, but I guess that images that are shown only in the frondend should be stored in the frontend... shouldn't they?

Therefore:

a) Is any of these ideas acceptable? Is there a better way to avoid this error?

b) Another possibility: is there a way to access the frontend folders from the backend? I get a bit lost with the publishing and artifacts in Azure and I don't know if I could do it somehow.

xavier
  • 1,860
  • 4
  • 18
  • 46

1 Answers1

0

I'm not sure how you've built the frontend, but I'm assuming that the background images are set using CSS. It is possible to set multiple background images in the same rule, and the browser will load them all and display them one below the other - if the first one loads successfully, and isn't transparent, then that is the only thing the user will see. But if the first image fails to load - for example because it doesn't exist, the second image will be shown.

See this other answer for more details: https://stackoverflow.com/a/22287702/53538

Guss
  • 30,470
  • 17
  • 104
  • 128
  • Thanks for the idea! I tried with the "alt image" but I was getting the 404 error anyway in the console. Yes, the page worked but I was getting an error in the console and that's what I want to avoid. I will check if the `background` solution in the css works, but this would solve only partially my problem, because in some pages I also use this image but not in a background. – xavier Feb 02 '21 at 22:29
  • No, it doesn't work: I still get the 404. The image is loaded properly but I can't avoid the 404 :-( – xavier Feb 02 '21 at 22:44
  • Then you need to load it in javascript: make an XHR to the first image, if it loaded - update the CSS (the data should be cached so it'll appear immediately) otherwise set the background. I'll do a proper write-up tomorrow. – Guss Feb 02 '21 at 22:51