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
