文章/答案/技术大牛

发布

社区首页 >问答首页 >在JavaScript随机图像阵列中添加超链接到图像

问在JavaScript随机图像阵列中添加超链接到图像
EN

Stack Overflow用户

提问于 2021-12-08 20:16:47

回答 2查看 120关注 0票数 0

我有一个随机的图像生成数组，我希望插入与每个图像相关的超链接，但是我似乎找不到一个有效的答案或解决方案；或者我能够理解到足以适应我的情况/代码。我是一个javascript新手，只是试着尽我所能去学习！感谢您的帮助，非常感谢！

联合来文如下：

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>

javascript

arrays

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-12-08 22:34:14

这就是我认为你想要达到的目标。注意:不要使用document.write --它有非常具体的用途，这不是一个好的用途。而是使用innerHTML属性(还有其他方法)。我修改了代码，以便在代码片段中看到结果。

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 S.O. 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>

票数 0

Stack Overflow用户

发布于 2021-12-08 23:19:39

通过重定向到具有所请求的尺寸的随机图像，微微和的答案从picsum.photos/width/height获得。

为了获得图像和链接匹配，您必须发出picsum GET请求，并从响应"Location“头部获取重定向URL。这是应该放在DOM中的URL。

运行代码片段后，右击图像并在新选项卡中打开它。注意，会出现相同的图像。使用原始的GET url作为href将用户引导到一个新的随机图像。

// 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>

注意，我们不需要使用URL数组中的随机选择。picsum在初始获取时进行随机化。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70281209

复制

相似问题

问在JavaScript随机图像阵列中添加超链接到图像
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JavaScript随机图像阵列中添加超链接到图像EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JavaScript随机图像阵列中添加超链接到图像
EN