Return images via PHP and set as src with AJAX

Question

I have some problems when I try to display multiple images (well it doesn't work for one image so multiple is impossible), and what I'm doing is with my function of AJAX to recover from my db, all the images location string that are in the table images. Then it calls another function called setImages() which receives those strings of the image locations and I use iterate over the strings (using jQuery's .each()) to trigger an AJAX request that calls a php script named image.php?img=[data]. data is the string containing the image location, so I have something like the code below:

The problem is that setImages() of my js, doesn't show the images

the PHP file:

<?php $init="/var/Imagenes/cursos/"; $img=$_GET['img']; $path=$init.$img; echo $path; //el path debe ser autores/ or cursos/ $name="azure"; /* header("Cache-Control: no-cache, must-revalidate"); header("X-Sendfile: $path"); header("Content-Type: image/jpeg"); header("Content-Disposition: inline; filename='archivos'"); */ //el nombre de la base de datos de la imagen header("Cache-Control: no-cache, must-revalidate"); if((isset($path)&& !is_null($path))){ header("X-Sendfile: $path"); if(strpos( $img, ".png" )||strpos( $img, ".PNG" )){ header("Content-Type: image/PNG;base64"); } elseif(strpos( $img, ".jpg" )||strpos( $img, ".JPG" )){ header("Content-Type: image/jpg;base64"); } elseif(strpos( $img, ".jpeg" )||strpos( $img, ".JPEG" )){ header("Content-Type: image/jpeg;base64"); } else{ return "error.jpg"; } $newimg=rand(1000 , 9999 ); header("Content-Disposition: inline; fileimg= $newimg-$img"); exit(); } else{ echo "no se pudo realizar la consulta";}

JS code:

functions listImgCursos works fine...

function listImgCursos(identificador) { var resultado= $.ajax({ url: consultaBasica, cache: false, type: 'POST', data : { action: "imgCursos"} }).then( function(data){// Success var flagErrFound = false; var nf404 = "" ; $.each(data, function(index,datos){ if((datos['id']===null)||(datos['img']=="")||(datos['img']==null)){ nf404 = datos['id']; flagErrFound= true; }//if close }//function close )//each close if(flagErrFound===true){ error = {error: "CX02", msj: "Failed to get data from records.", data: nf404 }; return $.Deferred().reject(error); } else return data; },//function sucessful function(){// fail error = {error: "CX01", msj: "Failed to execute ajax"}; return $.Deferred().reject(error); }//function fail );//then; resultado.done( function (data){//success setImages(data); }//function DONE ); resultado.fail( function(e){//function fail console.log(e.msj + " "+ e.error + ":" + e.data ); }//function FAIL) ); } function setImages(data){ $.each(data, function (index, datos) { var temp="../classes/imagen.php?img="+encodeURIComponent(datos['img'])+"&t="+((new Date).getTime()); console.log(temp); // returns something like: ../classes/imagen.php?img=curso-2561.jpg&t=1489074434134 $.ajax({ url: temp, type: "GET", dataType: "image/jpg;base64", async:true, cache: false, success: function(datai){ console.log(datai); $('#pickimg').append('<img src="data:image/png;base64,' + datai + '" />'); }, fail: function(){ } }); });

I would recommend not to load the image content with AJAX, instead set the src of your <img> to image.php?img=[data] — Roland Starke
– Roland Starke, Commented Mar 9, 2017 at 16:08
Can you please provide additional information other than 'does not show images'? A JS Fiddle, or a description of what happens on success() (if it is even being called, if there is a JS error, if the img gets appended, but it doesn't show, etc.) — Lawrence Johnson
– Lawrence Johnson, Commented Mar 9, 2017 at 16:24
Where did you find that header tag (i.e. header("Content-Disposition: inline; fileimg= $newimg-$img");)? Have you used that in other places to return the image contents? — Sᴀᴍ Onᴇᴌᴀ
– Sᴀᴍ Onᴇᴌᴀ, Commented Mar 9, 2017 at 16:26

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-03-09 17:25:39Z

The problem is that setImages() of my js, doesn't show the images

This is because of multiple reasons:

The PHP code isn't actually returning the file contents. To do that, use a function like file_get_contents(), readfile(), etc. Also, the string should be base-64 encoded so use base64_encode().
```
$newimg=rand(1000 , 9999 ); header("Content-Disposition: inline; fileimg= $newimg-$img"); echo base64_encode(file_get_contents($path)); exit(); 
```
This may be redundant with the first bullet, but the Syntax for header Content-Disposition only contains three directives: name, filename and filename*.¹. So that fileimg directive is invalid. That header could include the filename directive but because a string is being returned it would be useless:
```
header("Content-Disposition: inline; filename=\"$newimg-$img\""); 
```
In that sense it isn't really returning an image, so the headers for Content-Type are basically incorrect. Consequently, the AJAX call (using $.ajax()) should not specify the dataType (i.e. dataType: "image/jpg;base64" which wouldn't be dynamic anyway - for jpgs, pngs, etc). So remove that dataType option.

See a demonstratation of this with the modifications applied in this phpFiddle. Click the button labeled Run - F9 - and then when the frame loads, click the button labeled Update to trigger an AJAX call to the PHP script which will load a PNG image and append it to the element with id attribute "pickimg".

¹_{https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition#Directives}

Collectives™ on Stack Overflow

Return images via PHP and set as src with AJAX

the PHP file:

JS code:

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

the PHP file:

JS code:

1 Answer 1

Comments

Related