Here is the div:
<div id="img-container">
<img id="upSlika" src="#"/>
</div>
And this is the JSON response:
{"pictureUrl":"url"}
How can I change image's source to URL received in response above?
Suppose that your json is stored in the following variable json:
var json = {"pictureUrl": "url"};
With the following code, what you do is to set the attribute src to the element img with id="upSlika":
$("#upSlika").attr("src", json.pictureUrl);
You can check the documentation jQuery ID Selector and jQuery .attr()
You can change the image's src in jQuery by using attr() function.
See the documentation.
Try the code bellow:
//get the json to data variable
var data = {"pictureUrl":"url"};
$("#upSlika").attr("src", data.pictureUrl);
Related
im trying to store an image in HTML that comes from a url source in a variable using JavaScript. Could someone show me what code is required? i have started it off...
var productImage = document.getElementById("productImg").//??;
<img id="productImg"
src="https://i5.walmartimages.com/asr/1735db1c-d84f-417a-b871-27b63ee2b2e6_1.9a18f15c0e0fa321d0c5d073875b9738.jpeg?odnWidth=undefined&odnHeight=undefined&odnBg=ffffff" >
You were close. To obtain the value of an HTML element's attribute, you can access that attribute as a property of the DOM element.
var productImage = document.getElementById("productImg").src;
console.log(productImage);
<img id="productImg"
src="https://i5.walmartimages.com/asr/1735db1c-d84f-417a-b871-27b63ee2b2e6_1.9a18f15c0e0fa321d0c5d073875b9738.jpeg?odnWidth=undefined&odnHeight=undefined&odnBg=ffffff" >
You can use the src property.
var productImage = document.getElementById("productImg").src
You can also use the src property to set a new URL for the image if you want to replace it.
var productImage = document.getElementById("productImg");
productImage.src = URL
How can I change the img src of the img using the ajax. I have the location save in my database and I want to set the img src from the value of something data[0]['patient_photo'] I have the html of like this from my image :
<img id="checkup_pic" src="">
Here is my ajax code :
success: function(data) {
$('#valfname').text(data[0]['patient_fname']);
$('#valmname').text(data[0]['patient_mname']);
$('#vallname').text(data[0]['patient_lname']);
$('#valad').text(data[0]['patient_address']);
$('#valcont').text(data[0]['patient_contact_info']);
$('#valsex').text(data[0]['patient_sex']);
$('#valcvilstat').text(data[0]['patient_civil_status']);
$('#valbday').text(data[0]['patient_bday']);
$('#valage').text(data[0]['patient_age']);
$('#valheight').text(data[0]['patient_height']);
$('#valweight').text(data[0]['patient_weight']);
$('#checkup_pic').attr("src","");
You need to use attr property of jquery and pass your src in the value.
Try below code:
$('#checkup_pic').attr("src",data[0]['patient_photo']);
You could use jQuery functions prop() or attr() to set property to the DOM elements :
prop() : Set one or more properties for the set of matched elements.
attr() : Set one or more attributes for the set of matched elements.
So you need just to pass the source of your image data[0]['patient_photo'] to the src attribute of your img tag identified by #checkup_pic, like :
$('#checkup_pic').prop("src", data[0]['patient_photo']);
//Or
$('#checkup_pic').attr("src", data[0]['patient_photo']);
Hope this helps.
Try this:
$.ajax({
url: url, // url of your file from your data is being fetched like index.php
type: 'post',
success: function(data) {
$("#checkup_pic").attr('src', data[0]['patient_photo']);
}
})
I have a html snippet being returned through ajax. The snippet is an <img> tag.
<img src="image.jpg" />
I need to extract the value of the src attribute without loading the image initially. The reason for this is the src attribute contains a partial path that I need to manipulate in my app to load the image properly.
I have the following code currently extracting the src attribute:
var src = $(value).attr('src');
However, this causes the image to load, resulting in a 404. I would like to avoid this unnecessary request.
How can I extract the value of the src attribute without causing the browser to load the image?
I solved this by changing the name of the src attribute before loading it into jquery.
value = value.replace('src', 'data-src');
var src = $(value).attr('data-src');
Doing this allows me to extract the value without causing the browser to attempt to load the images.
Your best bet is probably to output a data tag on the image. You can then manipulate this using jQuery and then use it to write the final image path.
So you'd do something like this in your HTML:
<img data-img-src="abc.jpg" class="my-image" />
Then in your jQuery:
var path = $('.my-image').data('img-src');
console.log(path); // Do something here, then write the new path with:
$('.my-image).attr('src', new_path);
EDIT: Sorry I just re-read the bit where it's coming via AJAX. In that case, you can probably use the data callback of your ajax request to strip the src from the image.
$.ajax('someURL.html', function(data){
var html = data.replace(/\ssrc/g, ' data-src'),
img = $(html),
src = 'some/path/' + img.data('src');
img.attr('src', src);
$('#container').append(img);
});
If you just have the string , like <img src="image.jpg" /> why dont you go for regex?
Something like: /[\"\'][a-z0-9A-Z\.]*/.
PS:My regex skills are poor,so you could manipulate it accordingly.
Use
var string = '<img src="image.png">';
var matches = string.match(/src\=("|')(.*?)\1/);
console.log(matches[2]);
You can simply remove the attribute after accessing it.
This will not load the invalid image, as you can confirm in your console:
var s= $('<img src="invalidURL.jpg">'),
src= s.attr('src');
s.removeAttr('src');
console.log(src);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Remove removeAttr(), and it will attempt to load the image.
I have a database that has a table with a column called "link" that holds a link such as this "http://www.google.com", and a column called "image" that holds this "http://www.placehold.it/500x500".
I then have the following html:
<a href="" data-field="link">
<img src="" data-field="image">
</a>
I have a PHP backend that uses JSON and a JQuery plugin to retrieve and populate information but I don't know how to fill the href"" and src"" attributes specifically.
How can I do this with JQuery/JavaScript?
Is that the the thing you want?
$("a[data-field='link']").attr("href",yourValue);
$("img[data-field='image']").attr("src",yourAnotherValue);
Do you mean something like this
http://jsfiddle.net/0jLad8hj/
$(document).ready(function(){
$('a').attr('href', function(){
return $(this).data('field');
}).find('img').attr('src', function(){
return $(this).data('field');
});;
});
Use the .attr function from jQuery. The first value is the attribute to set and the second is the value. .data gets the data-attribute
Problem:
Trying to add image src to array without the website URL (http://).
HTML code:
<img src="images/pink.jpg" alt="Photo" class="pink">
JS code:
var photoArray = [];
photoArray.push(this.parentNode.getElementsByTagName("img")[0].src);
alert(JSON.stringify(photoArray));
Desired result:
http:// and so on adds to the array but all I want the array to save is "images/pink.jpg" without any http:// beginning.
Use .getAttribute('src') instead. It will fetch exactly what you need.
Working Code Snippet:
var photoArray = [];
photoArray.push(document.getElementsByTagName("img")[0].getAttribute('src'));
alert(JSON.stringify(photoArray));
<img src="images/pink.jpg" alt="Photo" class="pink">
Readup: .getAttribute() | MDN
This is because the browser expands the src property to the full URL. Use getAttribute to the the attribute value instead of the expanded src property.
this.parentNode.getElementsByTagName("img")[0].getAttribute('src')