从数组 60 多个选项中选择随机图像 javascript

Question

我知道这个问题已经有很多答案了，但我正试图弄清楚如何以最有效的方式做到这一点。 我有一个网站，可以通过单击按钮将图像发送到电话号码，但我想在 60 张左右的照片之间进行选择，并且手动将所有这些图像位置输入到数组中似乎并不理想。 这是我执行 email 操作的 js 文件，它全部托管在免费托管服务上。

// server.js
const express = require("express")
const app = express()
app.use(express.static("public"))

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html") 
  /* this sends the "index.html" file when people go to app.glitch.me/ */
})

app.get("/send", (req, res) => {
// where node app starts
var nodemailer = require('nodemailer');

var transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: process.env.USER,
    pass: process.env.PASS,
  }
});

var mailOptions = {
  from: process.env.USER,
  to: process.env.RECIP,
  subject: "As you requested",
  text: '',
  attachments: [
    {
 /*image location*/
      path: 'https://post.healthline.com/wp-content/uploads/sites/3/2020/02/322868_1100-1100x628.jpg',
    }
  ]
};

transporter.sendMail(mailOptions, function(error, info){
  if (error) {
    console.log(error);
  } else {
    console.log('Email sent: ' + info.response);
  }
}); 

  res.redirect("/sent.html") // after sending the email, redirect back to "index.html" at app.glitch.me/
})
app.listen(3000); //open for traffic

这是我的 HTMl 如果它甚至与我的问题有关

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style_index.css">

     <a href="/send">click me for snazzy pics</a><!-- script to ping --!>

    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>  
  <body>
    <h1>hello</h1>

    <p>
      I made this.
    </p>
  </body>
</html>

Answer 1

尝试首先从托管它们的位置记录所有图像。 如果它不是您可以调用的数据库，那么您可能需要手动创建它们的数组。 一旦它们位于 object 中，您可以简单地使用一个变量来确定图像链接应该来自数组中的哪个 position。 我希望下面的帮助。

例如：


imageChoices = ["https://post.healthline.com/wp-content/uploads/sites/3/2020/02/322868_1100-1100x628.jpg", "https://post.healthline.com/wp-content/uploads/sites/3/2020/02/322868_1100-1100x628.jpg", etc.]

randomIndexChooser = Math.floor(Math.random() * 60) + 1;


var mailOptions = {
  from: process.env.USER,
  to: process.env.RECIP,
  subject: "As you requested",
  text: '',
  attachments: [
    {
 /*image location*/
      path: imageChoices[randomIndexChooser],
    }
  ]
};

Answer 2

您需要创建一个调用 api 的 ajax 服务，api 循环遍历指定文件夹中的所有文件并返回文件路径列表。 从 api 获得列表后，您将 append 将它们添加到 javascript 代码中的所需数组中。

我将在 asp.net c# 中为您提供一个示例，您可能正在使用另一个框架，但您至少可以从这个想法中受益。

这是 api 中的 function

[HttpGet]
       public List<string> GetImageFilesPaths()
       {
//getfiles returns all found files' paths in a specified directory
           List<string> imageFilePaths = Directory.GetFiles("folderpath", "*.png", SearchOption.AllDirectories).ToList();
       }

调用 API 的 ajax 服务

  $.ajax({
        url:'hostname/apiname/GetImageFilesPaths'
        contentType: "application/json",
        dataType: 'json',
        success: function(result){
            //here you append the result which is the list of file path
            //into your wanted array, you can also loop 
            result.forEach((imagePath)=>{
          arrayOfImages.push(imagePath)
          })

        }
    })

从数组 60 多个选项中选择随机图像 javascript

问题描述

2 个解决方案

解决方案1
1 2020-04-05 17:28:33

解决方案2
1 2020-04-05 17:45:27

从数组 60 多个选项中选择随机图像 javascript

问题描述

2 个解决方案

解决方案1 1 2020-04-05 17:28:33

解决方案2 1 2020-04-05 17:45:27

解决方案1
1 2020-04-05 17:28:33

解决方案2
1 2020-04-05 17:45:27