current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I'm looking for an answer on how to display an image in HTML from my Parse database using javascript. Reading through the docs on parse.com proved to be little help.

The class where I have the image stored is called 'content'. The images are stored as a file in a column called 'image'.

share|improve this question
    
Do the images have urls? –  Douglas Aug 31 '13 at 22:47
add comment

3 Answers

up vote 3 down vote accepted

From the Parse JavaScript Guide:

How to best retrieve the file contents back depends on the context of your application. Because of cross-domain request issues, it's best if you can make the browser do the work for you. Typically, that means rendering the file's URL into the DOM. Here we render an uploaded profile photo on a page with jQuery:

var profilePhoto = profile.get("photoFile");
$("profileImg")[0].src = profilePhoto.url();

So your steps could be something like:

  1. Query the content Class for the row which has the desired picture
  2. Get the picture's URL
  3. Set the source for an image element

Some example code below:

    // Query the content class for rows where the image exists
    var Content = Parse.Object.extend("content");
    var query = new Parse.Query(Content);
    query.exists("image");
    query.find({
      success: function(results) {
        // If the query is successful, store each image URL in an array of image URL's
        imageURLs = [];
        for (var i = 0; i < results.length; i++) { 
          var object = results[i];
          imageURLs.push(object.get('image'));
        }
        // If the imageURLs array has items in it, set the src of an IMG element to the first URL in the array
        if(imageURLs.length > 0){
          $('#color').attr('src', imageURLs[0]);
        }
      },
      error: function(error) {
        // If the query is unsuccessful, report any errors
        alert("Error: " + error.code + " " + error.message);
      }
    });
share|improve this answer
    
Thanks Daniel. It seems to have been successful in querying the database (when I look in the networks tab in the Developer Tools in Chrome, I see 'content' as one of the requests). However, I still don't know how to display the image. What do I put the IMG element's src as in my body? –  javinladish Sep 1 '13 at 17:40
    
Can I see what the IMG element looks like in your HTML? If I know what its id / class is, I can update my example code accordingly. Also do you know how many items your query is returning? You can try the query in Parse's Data Browser by going to parse.com/apps and clicking on the Data Browser link for the corresponding App. –  Daniel Bank Sep 2 '13 at 5:28
    
Hi Daniel, thanks for the reply. For example purposes, let's say the id of the image is "color". So the HTML would be something like, <img id="color">. What if I would like to show all the images from the database? There are about 8 items so far in my Data Browser. –  javinladish Sep 2 '13 at 17:30
1  
I updated the example code so the img id = 'color'. Still note that this code is only setting the source of one img element to the first image returned by Parse (if one is returned). If you have multiple images from Parse, you will need to dynamically create multiple img elements for each one. This starts to stretch the scope of the question. See also jQuery append: api.jquery.com/append. –  Daniel Bank Sep 3 '13 at 7:01
    
This is enough for me to work with! Thanks again for your work Daniel. –  javinladish Sep 3 '13 at 21:10
show 1 more comment
up vote 2 down vote

Building on the accepted answer above. Here is an example to pull multiple images back onto the page.

var GlobalBadges = Parse.Object.extend("GBadges");
    var query = new Parse.Query(GlobalBadges);
    query.exists("Global_Badge_Name");
    query.find({
      success: function(results) {
        // If the query is successful, store each image URL in an array of image URL's
        imageURLs = [];
        for (var i = 0; i < results.length; i++) { 
          var object = results[i];
          imageURLs.push(object.get('Global_Badge_Name'));
        }
        // If the imageURLs array has items in it, set the src of an IMG element to the first URL in the array
        for(var j = 0; j < imageURLs.length; j++){
            $('#imgs').append("<img src='" + imageURLs[j] + "'/>");                 
        }
      },
      error: function(error) {
        // If the query is unsuccessful, report any errors
        alert("Error: " + error.code + " " + error.message);
      }
    });

 </script>

<div id="imgs"> </div>
</body>
</html>

And this example shows you have to pull multiple images and define them in a div.

var GlobalBadges = Parse.Object.extend("GBadges");
    var query = new Parse.Query(GlobalBadges);
    query.exists("Global_Badge_Name");
    query.find({
      success: function(results) {
        // If the query is successful, store each image URL in an array of image URL's
        imageURLs = [];
        for (var i = 0; i < results.length; i++) { 
          var object = results[i];
          imageURLs.push(object.get('Global_Badge_Name'));
        }

        $('#Image01').attr('src',imageURLs[0]); //first image
        $('#Image02').attr('src',imageURLs[1]); //second image
        $('#Image03').attr('src',imageURLs[2]); //third image
      },
      error: function(error) {
        // If the query is unsuccessful, report any errors
        alert("Error: " + error.code + " " + error.message);
      }
    });
share|improve this answer
1  
To make it a little more efficient, I think you can move those var declarations outside of your loops. E.g. var obj; for (var i ...) { obj = results[i]; } –  graemeboy Apr 3 at 21:56
add comment
up vote 0 down vote

I ran into the same issue, but I decided to upload the image to their server and stored the image url in the database. Hope that helps.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.