CODEWITHSUNDEEP
javascriptjquerysqlitecordova
Mohd
Mohd

Reputation: 321

Retrieving and displaying image on HTML page from SQLite - JavaScript

I have some code here:

function cam(){
navigator.camera.getPicture(photoSave, onFail, { quality:
                            50});

}

function photoSave(imageURI) {
var imgFileName = imageURI.substr(imageURI.lastIndexOf('/')
                                  +1);
var imgPath = "tmp/" + imgFileName;
console.log(imgFileName);
var gotFileEntry = function(fileEntry) {
    alert("got image file entry: " +
          fileEntry.fullPath);
    var gotFileSystem = function(fileSystem){
        // copy the file
        fileEntry.copyTo(fileSystem.root, null,
                         copiedFile, fsFail);
    };
    // get file system to copy or move image file to
    window.requestFileSystem(LocalFileSystem.PERSISTENT,
                             0, gotFileSystem, fsFail);};

window.resolveLocalFileSystemURI(imageURI, gotFileEntry,
                                 fsFail);
}

function copiedFile(fileEntry) {
alert("copied file: " + fileEntry.fullPath);
var largeImage = document.getElementById('largeImage');

largeImage.style.display = 'block';
largeImage.src = fileEntry.toURI() + "?" + (new
                                            Date()).getTime();

imagepath = fileEntry.fullPath;
alert(imagepath);

}

// file system fail
function fsFail(error) {
console.log("failed with error code: " + error.code);
};

// camera fail
function onFail(message) {
alert('Failed because: ' + message);
}

I am able to store the filepath of the image taken by the camera (using PhoneGap API) into my database. But how would I display that filepath as an actual image on my HTML page when I am retrieving the image using the SELECT statement? Usually I would do a $('selector').val(row['somecolumn']) but how can I do this for an image? Thanks

EDIT: In my database row, the path looks like this /cdv_photo_001.jpg and on my HTML page my img tag has an id of "largeImage". I just don't know how I can get the actual image from the path and display it in that img tag. Hope this makes sense.

Upvotes: 0

Views: 1008

Answers (1)

user3561552
user3561552

Reputation:

Try using:

$('#largeImage').attr('src', row['rowname']);

This way you are assigning the src of the image as whatever the path is inside your database. The image will then be displayed on the page

Upvotes: 1

Related Questions