Is there a way to get a random image from an API and put it in a html site?

Coding Help
, ,
1

What I wanted to do was, get one random image url from https://loli-api.glitch.me/api/v1/twintails and display the image in html.

I tried doing it like this

<script>

const twinimgLimit = 145;
  const twinimgNumber = Math.floor(Math.random() * twinimgLimit);
  var twinurl =
    "https://media.publit.io/file/Twintails/" + twinimgNumber + ".jpg"; //only for jpg images

    <img src='twinurl'></img>

</script>

but, as I thought the src couldn’t hold vars so that’s why I’m writing this, lol.

I want it to be something like:

image
image1797×911 240 KB

so whenever I refresh, a random image from the API would show in a container.

<div class="w3-container w3-card-4 w3-center w3-purple">
    <br>
    <img src="twinurl" class="w3-image w3-card-4" onclick="document.getElementById('modal01').style.display='block'">
    <br>
    <br>
</div>

Thanks!

(If you need any more info, just reply, and i’ll respond with the info)

2

I’m not going to provide much about CSS but I would do this:

Put this in your head tag:

<script>
const twinimgLimit = 145; 
const twinimgNumber = Math.floor(Math.random() * twinimgLimit);
var twinurl = "https://media.publit.io/file/Twintails/" + twinimgNumber + ".jpg"
document.getElementById("img").innerHTML = `<img src=${twinurl} >`
</script>

Then, this is where you would want to put your image:

<div id="img"></div>

I’d rather use this than a webserver.

3

Hmmm, whenever I put this code in, it just says “JavaScript is not enabled!” but it’s enabled oof

4

I updated it because something I wanted to add a Javascript check, that that can be done with

<noscript>
Javascript is not enabled!
</noscript>

Because mine didn’t work :confused:

Try it now and see if it works.

5

This is my code so far:

  const twinimgLimit = 145; 
  const twinimgNumber = Math.floor(Math.random() * twinimgLimit);
  var twinurl = "https://media.publit.io/file/Twintails/" + twinimgNumber + ".jpg"
  document.getElementById("img").innerHTML = `<img src=${twinurl} >`
  </script>

<div id="img"></div>

<noscript>
  Javascript is not enabled!
  </noscript>

Still not working rip

6 
<!-- Place in head -->
<script>
const twinimgLimit = 145;
const twinimgNumber = Math.floor(Math.random() * twinimgLimit);
var twinurl = "https://media.publit.io/file/Twintails/" + twinimgNumber + ".jpg"
document.getElementById("img").innerHTML = `<img src=${twinurl} >`
</script>

<!-- The image will be below-->
<div id="img"></div>
7

Still nothing…

8

Should I put <div id="img"></div> right below the <script> ??

9

Wait, I think I fixed it:

<div id="img"></div>

<script>
const twinimgLimit = 145;
const twinimgNumber = Math.floor(Math.random() * twinimgLimit);
var twinurl = "https://media.publit.io/file/Twintails/" + twinimgNumber + ".jpg"
document.getElementById("img").innerHTML = `<img src=${twinurl} >`
</script>

The <div> element has to be on top.

Example: https://www.w3schools.com/code/tryit.asp?filename=GHZGC2NPVWYP

2 Likes
10

ayyyy, it worked! Thanks!

1 Like