我有一个 javascript 数组，想按名称调用图像答案

【问题标题】：I've got a javascript array and want to call images by name我有一个 javascript 数组，想按名称调用图像
【发布时间】：2021-06-17 07:38:23
【问题描述】：

我是一名面向对象的编程开发人员，对网络语言感到非常沮丧。事情是这样的... 我在 javascript 中有一个数组，拆分后看起来有点像这样：

imgArr [1, 6, 0, 2.......]

这不是一个静态数组，而是我从变量源读取的东西，这意味着有时数组会有不同数量的条目。

我的目标很简单，我想添加与数组条目一样多的图像源，并将图像源名称替换为数组中的这些数字。

我通常的做法是：

<img src=("img/userpics/" + ${imgArr{i}} + ".png");

在增量 for 中，但这似乎不可能，或者如果是，我真的不知道怎么做，也找不到怎么做。

我该如何继续？任何人都可以帮助这个可怜的网络开发文盲吗？

【问题讨论】：

你在使用前端框架吗？您应该通过 imgArr[i]... 调用数组成员...另外，如果您使用 javascript 模板字符串，您应该像 img/userpics/${imgArr[i]}.png
我无法在上一条评论中正确键入语法。如果您想使用模板字符串，您应该使用 ` 而不是 "。使用当前语法，您应该从 src 属性中删除 ${}。在here 中阅读有关模板字符串的更多信息
不，我对 web 的了解非常有限（很多年前做过 laravel，但几乎什么都不记得了）所以我没有框架，现在只有 notepad++ 和工作室代码，因为事情变得有点复杂大大地。谢谢
谢谢，我会检查那个模板

【解决方案1】：

在不了解上下文的情况下，以下是我的想法：

const imgArr = [5, 9, 2, 0, 1, ...]

const images = imgArr.map(n => `<img src="img/userpics/${n}.png" />`)

很大程度上取决于您所在的框架以及上下文和范围是什么，但这就是我如何获取整数数组并将它们以字符串形式映射到img 标签。如果你使用 React，你会这样做：

const images = imgArr.map(n => <img src={`img/userpics/${n}.png`} />)

【讨论】：

【解决方案2】：

不确定我是否正确理解了您的问题。但是为了你的目的，我会这样做

<img id= "myId" src=("img/userpics/1.png")/>

和js

let myImgSrc = document.getElementById("myId").src;

然后我可以将 myImgSrc 推送到数组或任何东西，然后循环并对其执行任何操作。检查这个：

【讨论】：