Using remote server to store and serve images in PHP not working

Question

I am creating a hotel management project using procedural PHP. I am storing the name of the image in database and uploading the image to another server using ftp(This is located in htdocs/remote-media-storage/media/ folder). But when I try to add the image name with its domain prefix to src it doesn't work. However when I inspect source the source url is right and when I open it in the browser it still works. How do i fix this.

This is how I am adding to src

This is the view in browser

The page source when inspected shows the correct url

And the image also shows up in browser when i open the same url

This is the directory where the image is stored

 <img src="<?php echo "http://domainaltered.infinityfreeapp.com/remote-image-storage/media/".$row["room_image"]; ?>" alt="<?= $row["room_image"]; ?>" />

What am I doing wrong?

what does the developer console say? 404? 403? there should be something that's telling you in there. you can check out for clues — Kevin, Nov 19 '20 at 06:05
Its saying `rooms.php:194 Cross-Origin Read Blocking (CORB) blocked cross-origin response` @Kevin — Alan Dsilva, Nov 19 '20 at 06:11
i think you should add content-type header on your rooms.php and header with header('Access-Control-Allow-Origin: *') — Jerson, Nov 19 '20 at 06:32

score 0 · Answer 1 · answered Nov 19 '20 at 06:29

0

What happens if you format your echo statement like the solutions offered here: How to echo <img src with PHP variables as values of the src attribute? Do you still get a broken image url?

Since you're using short tags in the alt, you could try this:

<img src="<?='http://thedomain.com/remote-image-storage/media/'.$row["room_image"];?>" />

answered Nov 19 '20 at 06:29

Jon Ohliger

68
1
8

Yes I did try this. Infact even if I copy the url and hardcode it the image is still broken. – Alan Dsilva Nov 19 '20 at 06:38
If it's an origins issue, maybe you need to treat the location of your images as if it's on a different domain. If true, maybe the second section of this MDN page would help: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image, titled "Storing an image from a foreign origin". If this fixes it, I would recommend the next step of limiting which domains have access to those images to just your website's domain – Jon Ohliger Nov 25 '20 at 22:23

score 0 · Answer 2 · answered Nov 25 '20 at 06:33

I found out that this is an issue of CORB. My request is being blocked. I tried to add these overrides to .htaccess file.

# Always set these headers.
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Content-Type"
Header set Access-Control-Allow-Methods "GET"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"
 
# Added a rewrite to respond with a 200 SUCCESS on every OPTIONS request.
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

But I am facing the same issue.

Using remote server to store and serve images in PHP not working

2 Answers2