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

问题描述

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

I'm having an existing database and i have to show the list of images in my worklight application to user so that they can select and adds to cart.

数据库中的图像列仅包含服务器上的图像路径。
即memory / toppings / nuts / hazelnuts.jpg
memory / toppings / nuts / macadamia_nuts.jpg

The image column in database is having only path of images at server.i.e "memory/toppings/nuts/hazelnuts.jpg" "memory/toppings/nuts/macadamia_nuts.jpg"

所以如何获得所有这些图像并显示在我的工作灯应用程序上。

so how to get all these images and show on my worklight application.

推荐答案

您应该做的是连接服务器URL和图像路径后从数据库中检索它。

What you should do is concatenate the server URL and the image path after you retrieve it from the database.

让我们在数据库中说我存储了这个：/ uploads / original / 6/63935/1570735-master_chief.jpg，所以连接会是这样的：

Lets say in the database I store this: "/uploads/original/6/63935/1570735-master_chief.jpg", so the concatenation would be like this:

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

下面是一个工作示例。

Below is a working example.

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

Upon clicking a button, a SQL adapter procedure is invoked and returns a URL stored in the database. This URL is inserted into a pre-existing img tag's src attribute, which then gets displayed.

您需要采取此实施方案并根据您的需要进行更改。

You need to take this implementation and alter it to fit your needs.

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：

此代码段显示如何将多个图像添加到动态创建的 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"/>

在数据库中：

table (users)
|
-- column (profileimg)
------ row contents: some URL pointing to an image, for example: /myimg.png

这篇关于如何使用worklight应用程序中的sql / http适配器从现有数据库中检索图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！