Angular 2中如何从Event对象获取元素的背景图片？

我来帮你搞定这个问题！你当前代码里的event.target.style.background.url是错误的，因为element.style.background返回的是一个字符串（比如"url('xxx.jpg') center / cover"），并不是一个带有url属性的对象，所以这样拿不到正确的地址。

下面是修正后的实现方案：

修正后的TypeScript代码 #

openZoomer(event: MouseEvent) {
  // 把event.target转为HTMLElement类型，方便调用DOM API
  const targetElement = event.target as HTMLElement;
  
  // 用classList.contains判断类名，比直接对比className更可靠（避免类名顺序/空格问题）
  const isTargetImage = targetElement.classList.contains('ngx-gallery-image') && 
                        targetElement.classList.contains('ngx-gallery-active');
  
  if (isTargetImage) {
    // 获取元素实际应用的计算样式（包括CSS类设置的样式，不止内联）
    const computedStyle = window.getComputedStyle(targetElement);
    const backgroundImageStr = computedStyle.backgroundImage;
    
    // 用正则表达式提取url()中的内容，兼容带引号/不带引号的情况
    const urlMatch = backgroundImageStr.match(/url\(["']?(.*?)["']?\)/);
    
    if (urlMatch) {
      // urlMatch[1]就是提取到的图片URL
      this.current_image = urlMatch[1];
      this.isZooming = true;
    }
  }
}

关键说明 #

• 为什么不用element.style.backgroundImage？
  element.style只能获取元素的内联样式，如果背景图片是通过CSS类（比如.ngx-gallery-image）设置的，element.style.backgroundImage会是空字符串。而window.getComputedStyle()能拿到元素实际渲染时的所有样式，更通用。
• 类名判断的优化
  直接对比className容易因为类名顺序、多余空格导致匹配失败，用classList.contains()逐个判断更稳妥。
• 正则提取URL的逻辑
  正则/url\(["']?(.*?)["']?\)/可以匹配以下几种常见的背景图片格式：
  • url(https://example.com/img.jpg)
  • url('https://example.com/img.jpg')
  • url("https://example.com/img.jpg")

内容的提问来源于stack exchange，提问作者Govind Samrow