如何准确靶向将其源存储在CSS中的图像元素？

Question

我正在使用Vite将图像源存储在CSS中的位置。在一个功能中，我必须获得图像的来源，但我不确定如何从CSS中提取它。以下是我选择IMG标签以及如何存储IMG源的方式。我如何在JavaScript中写下此内容以将CSS内容放入数组中？

// JS
this.images = [...document.querySelectorAll('img')];

//css
#firstimage {
  content: url(./assets/img1.jpg);
}
#secondimage {
  content: url(./assets/img1.jpg);
}

Answer 1

OP需要代码> 查询图像 - 仅 Nodelist 的每个图像 - 元素（将其按其计算的 content> content> style> style> style> style> style> style> style> style> style> style> style> style> style> style> 。

console.log(
  [...document.querySelectorAll('img')]
    .filter(img => {
      // get the computed style object.
      const cs = window.getComputedStyle(img);
      // access the computed `content` value.
      const value = cs.getPropertyValue('content');
      // test whether `value` contains an URL.
      //  - [https://regex101.com/r/j7nccT/1]
      return (/^url\(.+\)$/).test(value);
    })
);

#firstimage {
  content: url(https://picsum.photos/67/100?grayscale);
}
#secondimage {
  content: url(https://picsum.photos/66/99?grayscale);
}
.as-console-wrapper {
  max-height: 90px!important;
}

<img id="firstimage" src="" />
<img src="https://picsum.photos/67/100" />
<img src="https://picsum.photos/66/99" />
<img id="secondimage" src="" />

编辑 ...由于上述（初始）答案错过了OP要求的一个（最重要）。

“在函数中，我必须获得图像的来源，但我不确定如何从CSS中拉出它。......我如何写这个。将CSS内容放在数组中？

首先提供的解决方案需要从 filter 更改为 降低 任务，其中一个（对于前者）不仅是 content 通过简单的正则值，例如... ^url \（ 。+\）$ ...但（如后者） /a> forgex的图像源，例如... ^url \（（？＆lt） ； >命名捕获组。

console.log(
  [...document.querySelectorAll('img')]
    .reduce((result, elm) => {

      // get the computed style object.
      const cs = window.getComputedStyle(elm);

      // access the computed `content` value.
      const value = cs.getPropertyValue('content');

      // test for and capture the image's source.
      //  - [https://regex101.com/r/j7nccT/3]
      const src = (/^url\((?<src>.+)\)$/)
        .exec(value)?.groups?.src ?? null;

      if (src !== null) {
        result.push({
          // create an object of element reference and source.
          elm,
          src: src
            // remove possible leading single/double quote.
            .replace(/^['"]/, '')
            // remove possible trailing single/double quote.
            .replace(/['"]$/, '')
        });
      }
      return result;

    }, [])
);

#firstimage {
  content: url(https://picsum.photos/67/100?grayscale);
}
#secondimage {
  content: url(https://picsum.photos/66/99?grayscale);
}
.as-console-wrapper {
  max-height: 90px!important;
}

<img id="firstimage" src="" />
<img src="https://picsum.photos/67/100" />
<img src="https://picsum.photos/66/99" />
<img id="secondimage" src="" />