在javascript中将图像添加到数组答案

【问题标题】：adding image to array in javascript在javascript中将图像添加到数组
【发布时间】：2020-08-01 06:41:08
【问题描述】：

我的代码：

var a = ["1","2","3"]
console.log(a)

输出为 [1,2,3]

预期的输出是：

1.jpg、2.jpg 和 3.jpg（所有图片）

我的代码在 webstorm 中运行良好并给出了预期的输出。如何添加图像？每当我试图得到这个答案时，我都会被重定向到一种新的语言或框架。如何将设计添加到我的 javascript 代码中？

【问题讨论】：

那么您是在尝试将图像名称还是实际图像内容添加到数组中？
如果我只是输出图像名称。 console.log(a.map((value)=> {return `${value}.jpg`}))
我正在尝试添加图片内容。我的数组是一副卡片，我想为每个项目添加图像，我为每个项目准备好卡片图像。我还不知道这样做的适当方式，我将尝试添加图像，然后将功能添加到按钮等。

标签： javascript web frontend backend

【解决方案1】：

const a = ["1", "2", "3"];
const imageFolderPath = "/";
const imageExtension = '.jpg';

var imagePaths = a.map((name) => imageFolderPath + name + imageExtension );

function createImages(imagePaths) {
  return imagePaths.map((imagePath) => {
    const image = document.createElement("img");
    image.setAttribute("src", imagePath);
    return image;
  });
}

function addImagesToDiv(divId, images) {
  const theDiv = document.getElementById(divId);
  images.forEach((image) => theDiv.appendChild(image));
}

const images = createImages(imagePaths);
addImagesToDiv("myDiv", images);

&lt;div id="myDiv"&gt;&lt;/div&gt;

【讨论】：

非常感谢您的回复。我试过了，但出现了这个错误： const image = document.createElement("img"); ^ ReferenceError: document is not defined 我在 webstorm IDE 中运行代码
@PirateHat 此代码在浏览器上运行。你是在浏览器还是 nodejs 上工作？ webstorm 不是编辑器吗？
是的..对不起，我忘了在浏览器中说我的结果..它显示空页面..我尝试了外部 .js 文件，然后写入脚本标记 html 文件..两者都显示空页面.
是的，因为在我的代码中我不知道你的图片文件夹在哪里以及你的图片扩展名是什么
手动添加一些带有 img 标签的图片到 index.html 文件中，告诉我这些 img 标签的 src 值是什么，我会帮助你

【解决方案2】：

据我了解，您想在数组中添加一个后缀，因此代码将是：

a.map(item => `${item}.jpg`)

【讨论】：