在使用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项目中正确地使用@符号解析行内样式中的图片路径了。
以上就是在Vite和React项目中，如何在行内样式中正确使用@符号解析路径？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
345
