What I’m trying to do
I want to display a random image from a set of images (random url chosen from a given set of 5-6 urls). Here is the code I am using (Note: this requires the dataview and Custom JS plugins)
<img id="my-image">
```dataviewjs
const imageUrls = [ 'https://images.pexels.com/photos/3244513/pexels-photo-3244513.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' ];
function setRandomImage() { const randomIndex = Math.floor(Math.random() * imageUrls.length);
const randomUrl = imageUrls[randomIndex];
const imageElement = document.getElementById('my-image');
imageElement.src = randomUrl; } setRandomImage();
Here’s the output in live-preview mode (works some times, sorry for the poor quality)
Here’s the output in reading mode (sorry again for the video quality):
What I have tried
I couldn’t think of anything except moving the img tag below the codeblock, but that doesn’t help either (I know its anyway of no use because the file is rendered from top to bottom, so i will always get errors)
Please explain me if I have done something wrong. Also, if this is not something that can be fixed easily, please do provide an alternative if u can think of one.