如何访问 img 值？ javascript

Question

我有一个具有多个属性的对象数组，其中一个称为“文件”，其中有两种类型，如下所示

const products = [
  {
    functional_id: "2_recharges",
    quantity: 1,
    title: "Coffret empreinte rouge",
    file: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAA…em3dIEUUE1O4fn/M8l6v+f6VPgptdk2plAAAAAElFTkSuQmCC"
  },
  {
    functional_id: "sacs_blancs",
    quantity: 1,
    title: "Sacs blancs",
    file: "data:image/;base64,"
  }
]

这是我第一次使用图像文件，我不知道如何区分以创建一个条件，以便只显示那些在其值中包含单词“png”的文件，在第一个示例的情况下，因为像第二个一样的不显示任何图像

我尝试将它们视为字符串以检查它们是否包含值字符串，但它不起作用，因为我知道它们不是字符串。

如果有人可以告诉我如何创造条件。提前非常感谢您

Answer 1

你会想要使用js的filter方法来检查文件是否包含'png'。

const products = [{
    functional_id: "2_recharges",
    quantity: 1,
    title: "Coffret empreinte rouge",
    file: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAA…em3dIEUUE1O4fn/M8l6v+f6VPgptdk2plAAAAAElFTkSuQmCC"
  },
  {
    functional_id: "sacs_blancs",
    quantity: 1,
    title: "Sacs blancs",
    file: "data:image/;base64,"
  }
]

const pngImages = products.filter(product => product.file.includes('png'))
console.log(pngImages)

Answer 2

这个简单的过滤器只返回那些在文件字符串中有 png 的产品

products.filter(product => product.file.match('png').length);