I want to load 3 random images from an array that contains the names of all of the images. I did this but the src doesn't work. I don't know why! Here is my code:
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var longitut = images.length;
var num =1+ Math.floor(Math.random()*longitut);
var foto="\"image"+num+".jpg\"";
foto=foto.toString();
alert(foto);
document.getElementById("imatge1").src=foto;
Try to remove quotes from the string value:
replace
var foto="\"image"+num+".jpg\"";
with
var foto="image"+num+".jpg";
Also, make sure that your image element has the proper id attribute value. In your case it should be:
<img id="imatge1"/>
The javascript code is correct, so it must be that you're either mistyping "image1" in the last line, or there's no element in your page.
Just add this to your HTML page:
<img src="" id="imatge1" />
You have a spelling mistake here,should be image1 not imatge1 should be:
document.getElementById("image1").src=foto;
Also did you look into relative and absolute paths when linking?, as it could be a path error.
Related
<img src="../1.jpg" alt="" id="change-image">
<button id= "press-to-change">Press</button>
let count = 0;
let arr = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]
document.getElementById("press-to-change").addEventListener("click", function(){
count++;
document.getElementById("change-image").src = "../" + arr[count]
So we have an HTML with an image and a button and in JS we have an array with images and we want to change the src of the image when we press the button(this is only a part of the code)
The above code works fine but i have a question why with:
document.getElementById("change-image").src = "../" + arr[count] code works fine but with document.getElementById("change-image").src = `url('../${arrImage[count]}')` code doesn't work.
For example this next code from another project works perfectly imageContainer.style.backgroundImage = `url('../${arrImage[count]}')`
background-image is a for style of an element and uses css format.
src is for the actual source of the image element and requires a valid path only
With images, you use or assign to the src property only for <img> elements.
If you want to set the background image of an arbitrary (but non-<img>) element, you need to use different syntax: you have to assign to the style.backgroundImage property, and you have to surround the URL you're setting with url(...)
The rendered HTML markup looks like this:
<img src="foobar.png">
<div style="background-image: url('foobar.png');"></div>
They're not interchangeable. With the background-image property, you need to always use url(...). With the src attribute, you need to never use url(...).
The text: url(image.jpg) is syntax only used in CSS.
That’s why it works for backgroundImage but not src
An image will always need src="path/to/image.jpg" without url() surrounding it.
I'm working on a script for a website, and I need to change the icon of one of its images. The problem is the image on the site only has a tag like this:
<img src="/pic1.png" alt="clear" >
I have tried selecting the image by using:
document.querySelector("img[src='pic1.png']");
What I have tried looks like this:
var y = document.querySelector("img[src='/pic1.png]'");
y.innerHTML = "<img src='pic2.png' alt='clear'>";
I also tried
var y = document.querySelector("img[src='/pic1.png]'");
y.src = "/pic2.png";
Is there anyway I can find the image using the src attribute, assign it to a variable, then replace the src?
Your help is appreciated :)
Your last example should work
var y = document.querySelector("img[src='/pic1.png']");
y.src = "/pic2.png";
y.load()
How about you set an Id on that element, then select it using document.getElementById(), then you can proceed to access the src property, which can help you change its value.
I know it's such a beginner thing. So I have this image in a div with the id thumb.
<img id="thumb" src="https://url-to-a-image">
And this Javascript that it's a magnify script:
<script type="text/javascript">
var myImgSrc = document.getElementById("thumb").getElementsByTagName("img")
[0].src;
var evt = new Event(),
m = new Magnifier(evt);
m.attach({
thumb: '#thumb',
large: 'myImgSrc',
largeWrapper: 'preview'
});
</script>
As you can see I'm trying to get the image using myImgSrc and then I'm trying to use in the large: 'myImgSrc'. When I put the a fixed url in large: fixed-url-to-the-image, it works fine.
The element with #thumb id is the tag img it self, the current selector will not return the src value, so it should be simply:
var myImgSrc = document.getElementById("thumb").src;
You can get image src like this,
var thumb = document.getElementById("thumb").src;
You don't need to use getElementsByTagName.
let img = document.querySelector('#thumb');
console.log(img.src);
If you use img.src, you'll see the source of your img tag.
getElementsByTagName is superfluous - you already have the exact element you want - you selected it by its ID. You'd only need getElementsByTagName if you wanted to get one or more elements by their tag and work on them all, rather than identifying one precisely.
So actually the solution is very simple - just get the src attribute of the ID-selected element directly. Working demo:
var myImgSrc = document.getElementById("thumb").src;
console.log(myImgSrc);
<img id="thumb" src="https://url-to-a-image">
I want to change the word of the large crop link for word with javascript. The url changes every update, but the suffix "large" continues, but I wanna change every update to "crop". I am a beginner, I'm sorry for this boring question
<img id="cover" src="https://i1.sndcdn.com/artworks-000088629087-uoefpq-large.jpg">
to
<img id="cover" src="https://i1.sndcdn.com/artworks-000088629087-uoefpq-crop.jpg">
var elt = document.getElementById("cover");
elt.src = elt.src.replace("large", "crop");
Note that this may not work as you expect if the "crop" is in the url more than once.
Use document.getElementById to get the cover element
var src = document.getElemtnById('cover').src;
Modify the src variable
src = src.replace('large', 'crop');
Update the src attribute
document.getElemtnById('cover').src = src;
I want to get the src of the img element in HTML. It looks like this:
<div class="image_wrapper" id="this_one">
<img src="Images/something.jpg" />
</div>
It's very simple when I put an ID in img, and get this src very easy.
But the problem is when I get src of img from div element.
var someimage = document.getElementById('this_one').firstChild.getAttribute("src");
alert(someimage);
I need to get this URL in string. But not worth.
Why not try something like this:
var someimage = document.getElementById('this_one');
var myimg = someimage.getElementsByTagName('img')[0];
var mysrc = myimg.src;
For more on using getElementsByTagName you may want to look at:
https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName
There is some error checking I didn't do here, but I am just trying to show how you can do it.
Or even simpler :
document.getElementById('yourimageID').getElementsByTagName('img')[0].src
Works for me
The problem is that you have the space characters between the div and img tags. That is why the first element of the div is not the image but the text - which has no method getAttribute.
You can remove spaces and use your js as it was:
<div class="image_wrapper" id="this_one"><img src="Images/something.jpg" /></div>
it will be working:
var someimage = document.getElementById('this_one').firstChild.getAttribute("src");
alert(someimage);
You can get the image tag from your's div using getElementsByTagName('img') as following:
var divEl = document.getElementById('this_one'),
src = divEl.getElementsByTagName('img')[0].src;
The above will solve your task.
More you can get from here Scripting Documents, I advise you to read this chapter.
I know the question is asked for js which has been answered, for jquery
var image = $('#this_one img')[0]; // $('#this_one img') this will return the img array. In order to get the first item use [0]
var imageSrc = image.src;
alert(imageSrc);
It might be useful for someone who looks similarly in jquery.
First, instead of using element.firstChild , use element.children[0] . Also, instead of element.getAttribute('src') , use element.src .
Hope this helps,
Awesomeness01
Why do we need to use jQuery if we can get the img src within the document by querySelector?
Try this:
document.querySelector('[src*="Images/something.jpg"]')
P.S.: jQuery has 94 kb minified file size. Please don't include it unless there's a requirement.