How can i replace image? Tag don't have id.
<img src="URL_1" />
I want replace URL_1 to URL_2
Some solution?
If you know the URL you can use
document.querySelector('img[src="URL_1"]').src = "URL_2";
If you don't know the URL and can use an id this would be it:
<img id="id" src="URL_1" />
document.getElementById("id").src = "URL_2";
Assuming that's the only image in the page you can use the Element.getElementsByTagName() to reference the element, and edit its src property:
document.getElementsByTagName('img')[0].src = 'URL_2'
The Selectors API is more appropriate as you can target the element with more details, using a CSS selector:
document.querySelectorAll('img')[0].src = 'URL_2'
If you can't add an id or a class maybe you can wrap your img tag with a div and use more specificity div .myclass img, last solution I see is if you know URL_1 you can select this img tag by the selector: img[src="URL_1"]
Give it an ID
<img id="img1" src="URL_1" />
Then
document.getElementById('img1').setAttribute('src', 'URL_2');
First of all, give an ID to your image
Html code
<img id="my_image" src="URL_1"/>
Jquery code
$("#my_image").attr("src","URL_2");
Or without using Jquery
document.getElementById("my_image").src="URL_2";
Related
Does anyone know how I can verify if an image exists using its <a href> or <img src>? I can only verify by its class such as:
it('Verifying vertical product', () => {
cy.get('.stage --vertical').should('be.visible')
})
but I want to know how to verify with img src or href tag. thank you
Full HTML:
<a href="haigclub.diageoplatform.com/en/our-whisky/haig-club-clubman">
<img style="margin: auto; display: block;" class="stage__image"
src="haigclub.diageoplatform.com/user/themes/haig/images/bottle.png">
</a>
If I understand correctly, you are looking for
cy.get('a[href="..."]')
Similarly
cy.get('img[src="..."]')
where you should add the appropriate text instead of ...
Of course, follow with .should('be.visible').
If you want to use a partial match, you can use
cy.get('img[src$="bottle.png"]') // NOTE src$=
A more explicit test might select href and .find() the img, to avoid the problem of returning multiple images.
cy.get('a[href^="haig-club-clubman"]')
.find('img') // find inside previous selector (a[href])
.should('have.attr', 'src')
.and('include', 'bottle.png') // explicit test of src attribute
If you want to assert the image with the image name you can do something like:
cy.get('img').invoke('attr', 'src').should('include', 'bottle.png')
Another option is to apply a filter which checks the attribute.
Not optimal here, but useful for more complicated scenarios.
cy.get('img')
.filter('[src^="bottle.png"]')
I have this HTML class where I want to replace the img src with different image. Have been able to find something close but nothing quite working.
HTML:
<div class="playoff-img">
<img src="src/img/imga.png">
</div>
Javascript:
$('div.playoff-img:contains("src/img/imga.png")').replaceWith('src/new/image/imgb.png');
You need an attribute selector and use .attr to set the src attribute.
$('div.playoff-img img[src="src/img/imga.png"]').attr('src', 'src/new/image/imgb.png');
The Js way of solving this problem
document.getElementsByTagName("img")[0].setAttribute("src","http://www.gstatic.com/webp/gallery/4.jpg");
The jQuery way of solving this problem
$(".playoff-img img").attr("src", "http://www.gstatic.com/webp/gallery/4.jpg");
simple and easy !
$(".playoff-img img").attr("src", "put new source address here");
Use [attr*="value"] to select an attribute that contains a particular string. Next you will want to use attr() to set the attribute to something new.
$('div.playoff-img img[src*="src/img/imga.png"]')
.attr('src', 'src/new/image/imgb.png');
<!-- use jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="playoff-img">
<img src="src/img/imga.png">
</div>
<script>
$(function(){
$(".playoff-img").attr("src", "put new source address here");
});
</script>
I want change image url dynamically based id attribute using jquery below i given the svg tag. any one help me.
<image id="background_image" width="804" height="943" preserveAspectRatio="xMinYMin" style=" pointer-events:none;background-repeat:repeat-y;" xlink:href="http://www.example.com/img/imag.png">
i want change dynamically the blow url
http://www.example.com/img/imag.png
A simple selector with attr like the one below should work for you.
$('#background_image').attr('xlink:href','newurl.com/image.png');
Use the jQuery .attr() to update the href.
$(function() {
$('#background_image').attr('xlink:href', 'http://placehold.it/350x150');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<image id="background_image" width="804" height="943" preserveAspectRatio="xMinYMin" style=" pointer-events:none;background-repeat:repeat-y;" xlink:href="http://www.example.com/img/imag.png">
Sorry if it's a noob question !
I'm using a script to translate my page with this code:
<script>
var translations= { 'en' :
{'title' : 'Title', 'textimg' : 'English text'},
'fr' :
{'title' : 'Titre', 'textimg' : 'Texte français'}
};
function doTranslate(language) {
for(id in translations[language]) {
document.getElementById(id).innerHTML = translations[language][id];
}
}
</script>
And this html:
<img src="img/Fr-Flag.png">
<img src="img/UK-Flag.png">
<h2 id="title">Title</h2>
The problem comes when I use an image (little icon): the text changes, but src seems to disapear, so when the text change, the image is not displayed:
<img id="textimg" src="img/fav-rond.png">English text</img>
How to solve this ?
Please see this answer about content inside the img tags: Div tag within img tag
But a possible solution is to remove the id from img and create a new element around the text with that id. For example:
<img src="img/fav-rond.png" />
<span id="textimg">English text</span>
And a demo: https://jsfiddle.net/7j2ckw0r/1/
This should solve your issue.
document.getElementById(id).setAttribute("id", translations[language][id])
You shouldn't be using innerHTML to solve this issue.
The <img> tag does not allow any information within, it is a "Empty element"
If you add any text inside, that becomes an invalid HTML text.
What you can do is adding an alt attribute:
<img id="textimg" src="img/fav-rond.png" alt="English text"/>
I strongly recommend you to visit this link, you will find the optimal way to translate your html page in pure JavaScript code.
JQuery search dom elements just after rendering and replace keys by its corresponding values
It isn't possible to add text to an image tag, instead place a span element directly after the image and access that instead.
<img src="img/fav-rond.png" /><span id="textimg">English text</span>
I am using Galleria and I need to wrap my images that Galleria puts into a slide with a link.
I was going to use this methodology: Give the <img> a bogus title= value and then append a <a> tag around the <img>, drawing the link I need from the title= tag.
This is the code I've got so far.
$("img#gallery").this.title.appendTo("img#gallery") { });
I'm trying to get the script to loop through all of the images and append the html.
I also don't know if I should be using .appendTo or .before and .after
That approach will work. You're looking for the wrap function:
var title = $('#test').attr('title');
$('#test').wrap('<a href="'+title+'" />');
This $.each will let you iterate through a series:
<img src="" class="test" alt="test" title="http://www.google.com" />
<img src="" class="test" alt="test" title="http://www.yahoo.com" />
$.each($(".test"), function() {
var title = $(this).attr('title');
$(this).wrap('<a href="'+title+'" />');
});
You could just listen for a click on the entire thing and then figure out if an image was clicked and if so which image and then change the location object.
Use $.each to iterate through all the images you want to wrap and then use
$('img#gallery').wrap('<a href='whatever'>)
to wrap it. It will automatically close the A tag.