How to change Image on HTML element from JSON file?

[vngx]

Hi there

I am trying to load Image on a Particular section from my JSON file
this is function that I am using

    <script type="text/javascript">
function myProfile(){
        
        $.get("/CollegeManagementSystem/myprofileget",
                {
                   
                }
                
        ).error(
        ).success(
                function(data)
                {
                    $("#userName").text(data.userName);
                    $("#userMob").text(data.userMob);
                    $("#userEmail").text(data.userEmail);
                    $("#userCategory").text(data.userCategory);
                    $("#userDept").text(data.userDept);
                    $("#userSubDept").text(data.userSubDept);
                    $("#userImage").prop('href','javascript:data.userImage');
                    
                }
         );
    }
window.onload=myProfile();
</script>

and this is my HTML page

    <div id="left_block" style="float: left;">
Name:<label id="userName">Name is Here</label><br>
Mob:<label id="userMob">Mobile Number is Here</label><br>
Email:<label id="userEmail">Email is Here</label><br>
Category:<label id="userCategory">Ctegory is Here</label><br>
Dept:<label id="userDept">Department is Here</label><br>
Sub Dept:<label id="userSubDept">Sub Dept is Here</label>
</div>

<div id="right_block" style="float: right;">
<img src="#" alt="Image is Here" width="20%" id="userImage"></img>
</div>

and this is my JSON response

{"userName":"AdamGilichrist","userMob":"8789878908","userCategory":"HR","userDept":"null","userSubDept":"null","userEmail":"adamgilichrist@gmail.com","userImage":"W0JANWYzOTY1MDg="}

what I am not getting Image set on block except that all are working fine like Name,Mob and other fields are setting fine

Where is wrong?

Thanks

[pakzech]

I assume you’re using jQuery, right? Try something like this if you’re receiving a base64 encoded image:

$.get('CollegeManagementSystem/myprofileget', { })
  .success(function retrieveData(data) {
    data = $.parseJSON(data);

    $('#userName').text(data.userName);
    // ... Other stuff here

    $('#userImage').attr('src', 'data:image/png,base64,' + data.userImage); // If your image is a JPEG, use image/jpeg instead
  })

[Lokesh]

If i didn’t misunderstood your problem, here is my cent to it. Correct the following line in your function.

    $("#userImage").prop('src', 'javascript:' + data.userImage);

Other thing which i want to know is the “userImage” key value in your JSON. It’s not a image path whereas to render as image, it should be the an image path like “/resources/images/abc.jpg”. Not sure if you are using some different algorithm to plot the image

[vngx]

still not working tried both of your solution but not working till know

[Lokesh]

Try setting value of “userImage” key to some image path. As mentioned earlier, save one image to your local folder and set that value to “userImage” to that folder path where images is stored.

For ex. create one folder names “resources” and save image inside that folder. Then set value of key as “/resources/imagesname.png”

[vngx]

some code please I am not able to convert it into code
i am reading so many threads but none of them worked for me so farr

[Lokesh]

From where you are getting the JSON response? is it third party API or some backend code to construct this JSON object?

[vngx]

I am getting from my web application it is generated by Spring Controller