Question

我正在开发移动应用程序，我想，如果我需要从服务器下载图片，我实际上无法本机运行PHP（我使用的是PhoneGap类型设置），那么我怎么能从数据库下载图片，通过JavaScript运行它，然后将其显示给用户？

我会想象：

Ajax请求，
返回二进制数据的HTML字符串
做一些事情吗？

或者

Ajax请求，
返回对图片的引用的HTML字符串，例如：picture1.jpg。在JavaScript中，写一些类似document.write <img src="http://blahh/img/"+imagePath

我不确定最好的方法是什么。

Answer 1

你可以这样做，但不是纯粹用JavaScript。

既然你提到了PHP，我就会朝这个方向前进：

在数据库中创建表，您将在其中存储所有图像。你需要拥有某种image_content字段并加载每个图像一些baseline64编码器如：

http://www.motobit.com/util/base64-decoder-encoder.asp。并存储将字符串返回到image_content字段。

或者您可以编写一些脚本来转换您想要的所有图像使用http://php.net/manual/en/function.base64-encode.php直接在PHP中Base64。
制作一个PHP文件。例如，您在该文件中giveme_encoded_img.php 需要在网址中有一个参数，例如gimme_encoded_img.php?image_name=header_bg。

然后使用image_name获取$_REQUEST并使用它进行MySQL查询 WHERE语句中的数据，以便您可以选择编码的图像字符串来自数据库。

之后，只需打印即可。
当您对上面的文件执行Ajax请求时，只需更新所需的文件即可图像src与响应。这样做的最佳方式是采取响应并通过id获取一些元素，如

var header_bg = document.getElementById（'header_bg'）; header_bg.src =回应;

最终的HTML需要看起来像这样：

img alt =“嵌入式图片”id =“header_bg”src =“data：image / png; base64，iVBORw0KGgoAAAANSUhEUgAAADIA ...”

Baseline64嵌入非常好，特别是如果您需要在电子邮件中嵌入图像，那么很多电子邮件客户端默认显示它们而不是从服务器隐藏远程图像。

我希望我足够清楚。

这仍然不是纯粹的JavaScript解决方案。

Answer 2

在我看来，动态加载外部图片的最简单方法是从包含图片网址的PHP脚本中获取JSON对象（如http://www.example.com/pictures/getPicture/YOUR_PICTURE_ID）。

服务器端

<?php
    $pictureUrl = 'http://example.com/pictures/picture.jpg'; //You can get it with a database query
    $pictureName = 'Foo';
    $pictureAltText = 'Bar';

    // You can do some stuff here.

    // At the end of the script, write result.
    echo json_encode(compact('pictureUrl', 'pictureName', 'pictureAltText'));
?>

客户端

<script type="text/javascript">
    // With jQuery
    $.getJSON('http://www.example.com/pictures/getPicture/YOUR_PICTURE_ID', function(data){
        console.log(data.pictureUrl, data.pictureName, pictureAltText);

        var img = new Image();
        img.src = data.pictureUrl;
        img.setAttribute('alt', data.pictureAltText);

        img.onload = function(){
            // Displaying picture when download completed
            $(img).appendTo('body');
        }
    });
</script>

如果你不使用jQuery，你必须使用XMLHttpRequest来获取JSON编码的响应并解析它（你可以在https://developer.mozilla.org/en-US/docs/JSON看到MDN文档。）

从数据库下载图片以通过JavaScript显示？

2 个答案:

服务器端

客户端