如何使用来自 worklight 应用程序的 sql/http 适配器从现有数据库中检索图像答案

【问题标题】：How to retrieve images from existing database using sql/http adapter from worklight application如何使用来自 worklight 应用程序的 sql/http 适配器从现有数据库中检索图像
【发布时间】：2014-07-05 16:16:12
【问题描述】：

我有一个现有的数据库，我必须向用户显示我的 worklight 应用程序中的图像列表，以便他们可以选择并添加到购物车。

数据库中的图像列在服务器上只有图像路径。即“记忆/浇头/坚果/榛子.jpg” “记忆/浇头/坚果/macadamia_nuts.jpg”

那么如何获取所有这些图像并显示在我的 worklight 应用程序上。

【问题讨论】：

标签： ibm-mobilefirst worklight-adapters

【解决方案1】：

您应该在从数据库中检索到服务器 URL 和图像路径后将其连接起来。

假设我在数据库中存储了这个：“/uploads/original/6/63935/1570735-master_chief.jpg”，所以连接应该是这样的：

var url = "http://static.comicvine.com" + response.invocationResult.resultSet[0].profileimg;
$("#img1").attr("src", url);

下面是一个工作示例。

单击按钮后，将调用 SQL 适配器过程并返回存储在数据库中的 URL。此 URL 被插入到预先存在的 img 标记的 src 属性中，然后显示。

您需要采用此实现并对其进行更改以满足您的需求。

HTML：

<input type="button" value="insert image" onclick="getImageURL();"/><br>
<img id="img1" src=""/>

JS：

function getImageURL() {
    var invocationData = {
            adapter : 'retrieveImage',
            procedure : 'retrieveImageURL',
            parameters : []
    };

    WL.Client.invokeProcedure(invocationData,{
        onSuccess : retrieveSuccess,
        onFailure : retrieveFailure,
    });
}

function retrieveSuccess(response) {
    var url = "http://static.comicvine.com" + response.invocationResult.resultSet[0].profileimg;
    $("#img1").attr("src", url);
}

function retrieveFailure() {
    alert ("failure");
}

备用 JS：
这段代码 sn-p 展示了如何将多个图像添加到动态创建的img 标签中。

function retrieveSuccess(response) {
    var url, i;
    for (i = 0; i < response.invocationResult.resultSet.length; i++) {
        url = "http://static.comicvine.com" + response.invocationResult.resultSet[i].profileimg;
        $("#imgholder").append("<li><img src='" + url + "'/></li>");
        // imgholder is a UL in the HTML where the img tags will be appended to.
    };
}

适配器 JS：

var procedure1Statement = WL.Server.createSQLStatement("select profileimg from users");
function retrieveImageURL() {
    return WL.Server.invokeSQLStatement({
        preparedStatement : procedure1Statement
    });
}

适配器 XML：

<procedure name="retrieveImageURL"/>

在数据库中：

表（用户）
|
-- 列 (profileimg)
------ 行内容：一些指向图片的URL，例如：/myimg.png

【讨论】：

显然，您需要实现一个 FOR 循环，该循环将使用来自数据库的不同图像 URL 更新每个 img 标签。
是的，我做到了。但只显示最后一张图片。