Figma导出的切图在Retina屏上模糊怎么办？

原理是这样，虽然你导出了@2x的图片，但在网页中显示时还需要告诉浏览器这是高分辨率图像。现在你的代码没有正确设置图像的物理像素和逻辑像素关系。

首先要做的是在img标签上添加 srcset 属性来指定不同分辨率的图像资源。这样浏览器才能根据设备的DPR（设备像素比）选择合适的图像。

可以这样修改你的代码：

const icon = new Image();

// 设置srcset属性，1x图可以用Figma直接导出，或者用CSS控制大小

icon.srcset = './assets/icon@2x.png 2x'; 

icon.src = './assets/icon@1x.png'; // 默认1x图

icon.style.width = '24px';

icon.style.height = '24px';

document.body.appendChild(icon);

如果不想准备两套图，也可以只用@2x图，但要通过CSS明确设置图像的实际尺寸：

.retina-image {

    width: 24px; /* 逻辑像素 */

    height: 24px;

    image-rendering: -webkit-optimize-contrast; /* 提升渲染质量 */

}

然后把图片类名加上：
icon.className = 'retina-image';

另外检查下Figma导出设置，确保选择了正确的倍率，而且别忘了勾选"约束比例"选项，不然导出的图片可能会变形。

这个方法我试过好多次了，一般都能解决Retina屏模糊的问题，希望对你有帮助。说真的，处理这种跨设备适配问题有时候挺烦人的，但这就是前端开发的一部分啊。

首先你要明白，在Retina屏幕上，像素密度更高，所以即使你导出了2x的图片，也需要让浏览器知道如何正确显示这张高分辨率的图片。否则，浏览器会简单地将图片缩小到你指定的尺寸，导致看起来模糊。

解决这个问题主要有两个步骤：

第一步，确保你在Figma中导出的图片确实是2x的分辨率。你提到已经导出了2x的PNG，这是正确的做法，但需要确认导出的尺寸是你设计稿尺寸的两倍。

第二步，你需要告诉浏览器如何正确使用这张2x的图片。可以通过CSS中的image-set函数或者HTML的srcset属性来实现。

我们先来看看CSS的image-set方法。你需要为你的元素设置背景图像，并指定高分辨率版本。例如：

.icon {

    width: 24px;

    height: 24px;

    background-image: image-set(

        url('./assets/icon@2x.png') 2x,

        url('./assets/icon.png') 1x

    );

}

这段CSS的意思是：当设备像素比为2时，使用icon@2x.png；否则使用icon.png。

接下来是HTML的srcset属性方法。这种方法适用于使用标签的情况。你可以这样写：

这里，src属性提供了默认的图片，而srcset属性则提供了不同分辨率的图片选项。浏览器会根据设备的像素密度自动选择合适的图片。

现在我们把这两种方法应用到你的JavaScript代码中。我们可以使用CSS的方法来修改你的JavaScript代码：

const icon = document.createElement('div');

icon.classList.add('icon'); // 假设你有一个对应的CSS类

document.body.appendChild(icon);

然后记得在CSS中添加相应的样式规则：

.icon {

    width: 24px;

    height: 24px;

    background-image: image-set(

        url('./assets/icon@2x.png') 2x,

        url('./assets/icon.png') 1x

    );

}

这样处理之后，你的图片在Retina屏幕上的显示应该会清晰很多。

希望这些步骤能帮到你！如果有其他问题，尽管问我。有时候前端的这些问题真是让人头疼，但也正因为如此，才能让我们不断学习和进步。