0

I have a button on my html code:

<input type="button" id="myBtn" value="Next Widget" onclick="next()">

and on my javascript I have:

images = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 'img/6.jpg', 'img/7.jpg', 'img/8.jpg', 'img/9.jpg', 'img/10.jpg'];

page = 0;

function next()
{

  page++;
  page %= images.length;
  document.getElementById('myImg').src = images[page];
}

Also on HTML code:

<div>
<img id="myImg" width="auto" height="auto" src="img/1.jpg" alt="1">
<br>
</div>

Basically I need to change it from the saved images source to a RESTapi Url, which is sorted by id (1 to 10). Not sure how I do this. Can anyone give me an idea. Do I have to declare the RESTapi Url first on the javascript?

I have tried just pasted the URL in the src="My URL here". But this only shows me a broken link.

Stuu
  • 1
  • 2

1 Answers1

0

If you have direct image url you can just copy paste in your images array. If it is not the case then you will have to load your images or data first through rest api call.

Mohammad Salim Hosen
  • 183
  • 1
  • 11
  • I have a secure URL with a username and password that needs to be accessed via URL to show the widgets, which are able to be called via their {id} – Stuu Jun 01 '21 at 19:20
  • If your api endpoint is secured then you might have implemented some sort of token based authentication. Try calling with that token from frontend. – Mohammad Salim Hosen Jun 01 '21 at 19:27
  • I can include my authentication on my url and it allows me to access it, It is only for my use, so calling it doesnt matter. – Stuu Jun 01 '21 at 19:41
  • It would be helpful if you post your api response of postman – Mohammad Salim Hosen Jun 01 '21 at 20:00
  • { "status": "success", "data": [ { "id": "1", "url": "http://***.***.**.*/openstack/images/widget1.jpg", "pence_price": "10", "description": "Gold, self tapping metal screw, 5mm" } – Stuu Jun 01 '21 at 20:04
  • Call your api from your html page then iterate through the data object of response and populate the images array by image url inside your data response. if you don't know how to call api from html page then checkout this url https://morioh.com/p/fa4b8280ddcc or https://stackoverflow.com/questions/54600060/how-to-call-rest-api-in-html – Mohammad Salim Hosen Jun 01 '21 at 20:11