通过PHP返回图像，并使用AJAX设置为src

当我试图显示多个图像时，我遇到了一些问题（一个图像不起作用，所以不可能显示多个图像），我正在使用AJAX功能从数据库中恢复表图像中的所有图像位置字符串。然后它调用另一个名为setImages（）的函数，该函数接收图像位置的字符串，我使用迭代字符串（使用jQuery的.each（））来触发一个AJAX请求，该请求调用一个名为

image.php？img=[data]

的php脚本。data是包含图像位置的字符串，因此我有如下代码：

问题是我的js的

setImages（）

没有显示图像

PHP文件：

问题是我的js的setImages（）没有显示图像

这是因为多方面的原因：


PHP代码实际上并没有返回文件内容。为此，请使用以下函数：，
，等等。此外，字符串应为base-64编码，以便使用


这对于第一个项目符号来说可能是多余的，但是header的语法只包含三个指令：name、filename和filename*。。因此，fileimg指令无效。该标题可能包含filename指令，但由于返回的是字符串，因此它将无效：

header("Content-Disposition: inline; filename=\"$newimg-$img\"");


从这个意义上讲，它实际上并没有返回图像，因此内容类型的标题基本上是不正确的。因此，AJAX调用（使用）不应该指定数据类型（即
数据类型：“image/jpg；base64”
，对于jpg、PNG等，它无论如何都不是动态的）。因此，请删除该数据类型选项


请参阅中应用的修改的演示。单击标签为Run-F9的按钮，然后在加载帧时，单击标签为Update的按钮触发对PHP脚本的AJAX调用，该脚本将加载PNG图像并将其附加到id属性为“pickimg”的元素


1
太棒了！（有问题吗？如果有，请描述。）我建议不要使用AJAX加载图像内容，而是将
的
src
设置为
image.php？img=[data]
您可以提供除“不显示图像”之外的其他信息吗？JS提琴，或者对success（）发生的情况的描述（如果调用它，如果出现JS错误，如果附加了img，但它没有显示，等等），您在哪里找到了头标记（即
头（“Content Disposition:inline；fileimg=$newimg-$img”）；
）？您是否在其他地方使用它来返回图像内容？datai中有什么？
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(){
    
              }
            });
        });

$newimg=rand(1000 , 9999 );
header("Content-Disposition: inline; fileimg= $newimg-$img");
echo base64_encode(file_get_contents($path));
exit();

header("Content-Disposition: inline; filename=\"$newimg-$img\"");