如何target/query 准确地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 需要 filter each image-element of the queried images-only NodeList (after casting it into an array type) by its computed content style-property with the help of window.getComputedStyle。

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 的一个（最重要的）要求。

"In a function, I have to get the source of the image but I am not sure how to pull it from the css. ... How would I write this ... to put the css content in the array?"

首先提供的解决方案需要从 filter 更改为 reduce task where one (as for the former) not just does test the content value by a simple regex like ... ^url$.+$$ ... but also (as for the latter) captures the image-source by a regex like ... ^url$(?<src>.+)$$ ... which features a named capturing group。

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="" />

如何target/query 准确地CSS 存储其来源的图像元素？

How to target/query exactly the image elements which have their source stored in CSS?

javascript

filter

reduce

selectors-api

getcomputedstyle