如何用jQuery获取img标签srcset中的原始图片地址

没问题，我来帮你搞定这个需求！你当前的代码直接获取了整个srcset属性的字符串，这显然不能直接用在background里——因为srcset是由多个「图片地址+宽度标识」的条目用逗号分隔组成的，浏览器根本没法识别一整串这样的内容作为背景图地址。

解决方案思路 #

我们需要把srcset字符串拆分成单个条目，然后从中筛选出你需要的原始图片（也就是宽度最大的那张，对应示例里的la-mericaine.jpg 1500w），再提取出纯图片地址。

代码实现 #

这里提供两种可靠的写法：

写法1：直接取最后一个条目（适合WordPress生成的srcset，通常原图在最后）

// 先获取目标图片元素
const $postImage = $('.wp-post-image');
if ($postImage.length) {
    const srcsetStr = $postImage.attr('srcset');
    if (srcsetStr) {
        // 拆分srcset为单个条目，同时去除每个条目的前后空格
        const srcsetItems = srcsetStr.split(',').map(item => item.trim());
        // 取最后一个条目（WordPress生成的srcset通常把最大尺寸的原图放在最后）
        const lastItem = srcsetItems[srcsetItems.length - 1];
        // 拆分出图片地址和宽度标识，取第一部分
        const originalImgUrl = lastItem.split(' ')[0];
        // 设置背景图
        $('.tax-product_tag .breadcrumbs').css('background', `url(${originalImgUrl})`);
    }
}

写法2：筛选宽度最大的条目（更通用，不受顺序影响）

如果担心srcset的条目顺序不确定，可以用这种方式主动找到宽度最大的图片：

const $postImage = $('.wp-post-image');
if ($postImage.length) {
    const srcsetStr = $postImage.attr('srcset');
    if (srcsetStr) {
        const srcsetItems = srcsetStr.split(',').map(item => item.trim());
        // 遍历所有条目，找到宽度最大的那个
        const maxWidthItem = srcsetItems.reduce((prevItem, currItem) => {
            // 提取条目中的宽度数值
            const prevWidth = parseInt(prevItem.split(' ')[1]);
            const currWidth = parseInt(currItem.split(' ')[1]);
            // 返回宽度更大的条目
            return currWidth > prevWidth ? currItem : prevItem;
        });
        const originalImgUrl = maxWidthItem.split(' ')[0];
        $('.tax-product_tag .breadcrumbs').css('background', `url(${originalImgUrl})`);
    }
}

为什么你的原代码不行？ #

你之前直接把整个srcset字符串传入url()，相当于让浏览器解析一长串包含多个地址和宽度的文本，这不符合CSSbackground属性的语法要求，自然无法正确显示背景图。

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