Tengo una matriz de generación de imágenes aleatorias y espero insertar hipervínculos asociados con cada imagen, pero parece que no puedo encontrar una respuesta o solución que funcione; o que puedo entender lo suficiente para adaptarme a mi situación/código. ¡Soy un novato de JavaScript que solo trato de aprender todo lo que puedo a medida que avanzo! Gracias de antemano a cualquier ayuda, todo es apreciado!
J. S. de la siguiente manera:
var random_images_array = ['img1.jpg', 'img2.jpg', 'img3.jpg']; function getRandomImage(imgAr, path) { path = path || 'img/'; // default path here var num = Math.floor( Math.random() * imgAr.length ); var img = imgAr[ num ]; var imgStr = '<img src="' + path + img + '" alt = "">'; document.write(imgStr); document.close(); }HTML:
<div id="heroImage" style="text-align: center"> <script type="text/javascript">getRandomImage(random_images_array, 'img/heroImage/')</script> </div>picsum responde a los GET de picsum.photos/width/height redirigiendo a una imagen aleatoria con las dimensiones solicitadas.
Para que la imagen y el enlace coincidan, debe realizar la solicitud GET picsum y obtener la URL de redirección del encabezado "Ubicación" de la respuesta. Esa es la URL que debe colocarse en el DOM.
Después de ejecutar el fragmento, haga clic derecho en la imagen y ábrala en una nueva pestaña. Tenga en cuenta que aparece la misma imagen. El uso de la URL GET original como href dirigirá al usuario a una nueva imagen aleatoria.
// super simple promise-returning http request async function get(url) { return new Promise(resolve => { const xmlHttp = new XMLHttpRequest(); xmlHttp.addEventListener("load", () => resolve(xmlHttp)); xmlHttp.open("GET", url); xmlHttp.send(); }); } async function getRandomImage(width, height) { const url = `https://picsum.photos/${width}/${height}`; let res = await get(url); // this is the important part: we need the redirect url for the image const redirectURL = res.responseURL const html = `<a href='${redirectURL}' target='_blank'><img src="${redirectURL}" alt=""/></a>`; const el = document.querySelector('#heroImage') el.innerHTML = html; } getRandomImage(200, 300) <div id="heroImage" style="text-align: center"> </div>Tenga en cuenta que no necesitamos perder el tiempo con una selección aleatoria de una serie de URL. picsum hace la aleatorización en el GET inicial.
Esto es lo que creo que estás tratando de lograr. Nota: no use document.write, que tiene usos muy específicos y este no es bueno. Más bien use la propiedad innerHTML (y también hay otras formas). Modifiqué el código para que pudieras ver el resultado en el fragmento.
let random_images_array = [{ img: "https://picsum.photos/200/300?1", link: "https://google.com" }, { img: "https://picsum.photos/200/300?2", link: "https://yahoo.com" }, { img: "https://picsum.photos/200/300?3", link: "https://loren.picsum.com" } ]; function getRandomImage(imgAr, path) { path = path || 'img/'; // default path here path = ''; // JUST FOR SO TESTING let num = Math.floor(Math.random() * imgAr.length); let img = path + imgAr[num].img; let imgStr = `<a href='${imgAr[num].link}'><img src="${img}" alt="" border="0" /></a>`; document.querySelector('#heroImage').innerHTML = imgStr; } window.addEventListener('DOMContentLoaded', () => { getRandomImage(random_images_array, 'img/heroImage/') }) <div id="heroImage" style="text-align: center"> </div>