在Vite和React项目中，如何在行内样式中正确使用@符号解析路径？

Vite和React项目中行内样式@符号路径解析

在使用Vite构建的React项目中，行内样式的background-image属性引用路径时，直接使用@符号引用路径可能会导致路径无法正确解析。例如，即使已在vite.config.JS中配置了别名：

resolve: {   alias: {     "@": path.resolve(__dirname, "./src")   } },

以下代码中的@符号仍然不会被解析：

<div style={{ backgroundImage: "url('@/assets/1.jpg')" }}></div>

这是因为行内样式处理机制与css文件不同。解决方法是使用require或import动态导入图片：

方法一：使用require

<div style={{ backgroundImage: `url(${require('@/assets/1.jpg')})` }}></div>

方法二：使用import

import img from '@/assets/1.jpg';  <div style={{ backgroundImage: `url(${img})` }}></div>

这两种方法都能正确解析@符号，将路径转换为正确的图片URL。 如果你的Vite版本不支持require，请使用import方法。 选择哪种方法取决于你的项目配置和Vite版本。 记住，import方法需要在组件顶部导入图片。 通过以上方法，你就可以在Vite和React项目中正确地使用@符号解析行内样式中的图片路径了。