Vite和React项目中行内样式@符号路径解析
在使用Vite构建的React项目中,行内样式的
属性引用路径时,直接使用
符号引用路径可能会导致路径无法正确解析。例如,即使已在
中配置了别名:
以下代码中的
符号仍然不会被解析:
这是因为行内样式处理机制与CSS文件不同。解决方法是使用
或
动态导入图片:
方法一:使用
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
方法二:使用
这两种方法都能正确解析
符号,将路径转换为正确的图片URL。 如果你的Vite版本不支持
,请使用
方法。 选择哪种方法取决于你的项目配置和Vite版本。 记住,
方法需要在组件顶部导入图片。 通过以上方法,你就可以在Vite和React项目中正确地使用
符号解析行内样式中的图片路径了。
background-image@vite.config.jsresolve: {
alias: {
"@": path.resolve(__dirname, "./src")
}
},@requireimportrequireimportimport img from '@/assets/1.jpg';
@requireimportimport@