在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項目中正確地使用@符號解析行內樣式中的圖片路徑了。