Vite + React项目中行内样式的路径解析
在Vite和React项目中，使用行内样式设置backgroundImage时，直接使用@符号引用路径可能会失效。即使你的vite.config.JS中已正确配置了别名：
resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
并且在css文件中能正常使用@符号（例如：.aa { background-image: url(‘@/assets/1.jpg’); }），行内样式却无法解析。
问题在于，行内样式中的字符串字面量不会被Vite的路径别名解析机制处理。解决方法是使用require()函数动态导入图片：
import React from 'react'; const MyComponent = () => { const imagePath = require('@/assets/1.jpg'); // 使用require()导入图片 return ( <div style={{ backgroundImage: `url(${imagePath})` }}> asdsa </div> ); }; export default MyComponent;
require()函数会将@/assets/1.jpg解析为正确的路径，并返回图片的URL。 然后，使用模板字面量将图片路径嵌入到backgroundImage样式中。
如果你的Vite版本不支持require()，可以使用import语句替代：
import React from 'react'; import myImage from '@/assets/1.jpg'; // 使用import导入图片 const MyComponent = () => { return ( <div style={{ backgroundImage: `url(${myImage})` }}> asdsa </div> ); }; export default MyComponent;
记住，import语句会将图片导入为一个模块，因此可以直接在backgroundImage中使用。 选择哪种方法取决于你的Vite版本和项目配置。 确保你的图片路径正确，并且图片文件存在于src/assets目录下（或你配置的别名路径）。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
