显示存储在常量内的变量中的图像答案

【问题标题】：Display an image stored in a variable inside a constant显示存储在常量内的变量中的图像
【发布时间】：2019-02-04 17:26:04
【问题描述】：

以下代码只是我原始代码的一部分。

我有几个像这样的常量。

每个变量都将显示为一个元素。

我需要的是尽可能用最简单的代码显示存储在所有变量 Imagem 中的每张图像。

const jogos2018 = {
  LSB_2018_JOGO_1: {
    Data: "11/03/2018",
    Hora: "15:00",
    Imagem: "<img src='Imagens/oponentes/basquetebol/lsb/bmc.png' />",
    Oponente: "BMC",
    Placar: "V, 52-42",
    Torneio: "LSB",
    Temporada: "Regular",
    Local: "Ginásio Miécimo da Silva",
    Mais: "Mais+"
  }
};

【问题讨论】：

将它们存储在数组或对象中
出于兴趣，您对这些对象有任何控制权吗？它们必须是单独的变量/对象吗？否则，我会将每个图像存储在一个数组/对象中（或先将它们拼凑在一起），然后再循环。

标签： javascript html image constants

【解决方案1】：

var items = Object.values(jogos2018)
var parentElement = document.body // You may change this to any other element

for (let item of items)
{
    parentElement.innerHTML += item.Imagem
}

此代码仅用于演示，含义：

此代码效率不高
需要进一步调整以满足您的需求

请参考MDN并查看文档createElement方法，以获得正确操作的一般概念（纯JS，没有jQuery）

【讨论】：

【解决方案2】：

代码可能更简洁/性能更好，但应该能让你继续前进。

我假设您的 jogos2018 是一个对象，其中包含由后缀为 LSB_2018_JOGO_x 或类似名称的增量属性表示的对象数组。

他们似乎已经在为你做标记，所以你需要做的就是收集这些并输出 html。

const jogos2018 = {
  LSB_2018_JOGO_1: {
    Data: "11/03/2018",
    Hora: "15:00",
    Imagem: "<img src='https://images.unsplash.com/photo-1549223123-e05d6e08643d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60' />",
    Oponente: "BMC",
    Placar: "V, 52-42",
    Torneio: "LSB",
    Temporada: "Regular",
    Local: "Ginásio Miécimo da Silva",
    Mais: "Mais+"
  },
  LSB_2018_JOGO_2: {
    Data: "11/03/2018",
    Hora: "15:00",
    Imagem: "<img src='https://images.unsplash.com/photo-1549018404-766c8a1fe5c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60' />",
    Oponente: "BMC",
    Placar: "V, 52-42",
    Torneio: "LSB",
    Temporada: "Regular",
    Local: "Ginásio Miécimo da Silva",
    Mais: "Mais+"
  }
}

const fillme = document.querySelector('#fillme')


const filler = arr => {
  let images = ''

  for (let prop in arr) {
    images += arr[prop].Imagem
  }

  return images
}



fillme.innerHTML = filler(jogos2018)

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

【讨论】：

【解决方案3】：

您可以使用JSON.stringify() 将JavaScript 普通对象转换为JSON 字符串，然后.match() 属性名称和值，.split() 属性名称

const jogos2018 = {"LSB_2018_JOGO_1":{"Data":"11/03/2018","Hora":"15:00","Imagem":"<img src='Imagens/oponentes/basquetebol/lsb/bmc.png' />","Oponente":"BMC","Placar":"V, 52-42","Torneio":"LSB","Temporada":"Regular","Local":"Ginásio Miécimo da Silva","Mais":"Mais+"}};

const getProp = (o, prop) => 
  JSON.stringify(o)
  .match(new RegExp(`"${prop}":"[^"]+(?=")`)).pop()
  .split(/^.*:"/).pop();

console.log(getProp(jogos2018, "Imagem"));

【讨论】：