How to programmatically change image

How To
1

image_id
image_id1042×564 44.4 KB

I need to change the image source with javascript. I can’t figure out the correct id to use to access Brick’s image element. The attached screen-shot show’s what this particular image’s id is.
In Divi I use
let imgID = “#” + ‘image’+counter + ’ img’;
document.querySelector(imgID).src = thisImage;

I’ve many variations of and yet can’t crack the nut. Any help?
let imgID = ‘img’ + “#” + ‘brxe-tgsbrc’;
let imgID = “#” + ‘brxe-tgsbrc’;
document.getElementById(imgID).src = thisImage;
— Element doesn’t exist, null object —

Thank you in advance,
Ghyker

2

Hi @ghyker ,

Received your email.
To get the image, you can try this.

let imgID = '#brxe-tgsbrc';
let img = document.querySelector(imgID)
console.log(img)

By the way, I am not able to access your playground page as it’s not published if not wrong.

Regards,
Jenn

3

Hi Jenn,
I used your code, the response in console is - null .
I published the page so hopefully you can access it now.

4

For those who wish to achieve this:

The dominating problem I was having is different image sizes. One of 2 can’t be large with breakpoint sizes while the other is small without the breakpoints. You get no warnings or errors, it just doesn’t display the new image.
You need to set an image via the builder or this won’t work.
The second problem is lazy loading of the initial image. If lazy loading is on, then the url to this image isn’t set before your js runs . Set the Image [ Loading ] property to “eager”.

Javascript to change image.
The code needs to be in footer.

// Get a handle to the Element.
let imgID = ‘#brxe-tgsbrc’; // this is Brick’s unique id for each element. You can see this in the image at the top of this post.
var img1 = document.querySelector(imgID); // sets a handle to the element.

// check the console
console.log("The Image is = " + img1); // if result is null then the id is wrong or hasn’t loaded yet.
console.log("img1 source " + img1.src ); // this should be an actual url with your initial image’s path.

// If the above worked out then replace the image.
img1.src = “the full path to the new image”; // ie… “https://yourfullpath/xx.png”

If the image doesn’t change then the problem is probably with the images themselves in breakpoint sizing or the urls are wrong.

Cheers.