腳本之家服務器常用軟件

快捷導航

Vite引用本地靜態(tài)資源的正確方式

更新時間：2024年12月06日 08:53:20 作者：喺小VIE

在前端開發(fā)中,除了通過 API 動態(tài)請求的數(shù)據(jù)外,還有一些諸如 HTML 文件、圖片、字體等文件需要在項目中被用到,通常這些被視為靜態(tài)資源,本文將基于 Vite + React 來講述并解鎖 Vite 引用本地靜態(tài)資源的正確姿勢,需要的朋友可以參考下

前言

在前端開發(fā)中，除了通過 API 動態(tài)請求的數(shù)據(jù)外，還有一些諸如 HTML 文件、圖片、字體等文件需要在項目中被用到，通常這些被視為靜態(tài)資源。對于靜態(tài)資源的管理和引用方式有時也會產(chǎn)生讓人困惑的問題，就比如在 Vite 構(gòu)建的項目中引用圖片資源時，如果引用方式不正確就可能會出現(xiàn)意外的 “圖裂” 情況。

本文將基于 Vite + React 來講述并解鎖 Vite 引用本地靜態(tài)資源的正確姿勢，主要包括 Vite 對本地資源的靜態(tài)引用和動態(tài)引用兩種方式，并結(jié)合一個案例來演示動態(tài)引用資源的實現(xiàn)過程。

靜態(tài)資源目錄結(jié)構(gòu)

靜態(tài)資源的存放位置基本上是約定俗成的，public目錄和src/assets。

public：目錄中一般會放著index.html和favicon.ico。
src/assets：而其他業(yè)務編碼中會使用的靜態(tài)資源，如圖片、字體等會統(tǒng)一放在src的assets目錄下。

比如這是我所開發(fā)的一個項目中所用到的部分圖片資源：

引用圖片資源的常規(guī)方式

在基礎前端項目開發(fā)中，通常會用到三種常規(guī)的加載圖片的方式，<img>元素、background樣式、JS 腳本動態(tài)指定src屬性。

<img>：在 HTML中通過<img>元素指定src引用圖片資源。

<img src="./assets/logo.png" alt="" />

background：通過background: url()或background-image: url()引用本地資源。

#logo {
  background: url('./assets/logo.png');
}

#logo {
  background-image: url('./assets/logo.png');
}

JS 腳本動態(tài)指定圖片src屬性。

document.getElementById('logo').src = './assets/logo.png'

配置路徑別名 @assets

為了更靈活地引用項目中的靜態(tài)資源，往往會給特定的路徑配置別名以方便引用，比如常見的src對應@，src/assets對應@assets。

如果項目中使用 Vite 構(gòu)建，可以在vite.config.ts中作如下配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  base: './',
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.join(__dirname, './src'),
      '@assets': path.join(__dirname, './src/assets'),
    },
  },
});

Vite 項目中引用圖片資源

在以 Vite 為底層構(gòu)建的 React 項目中引用圖片資源就不能再同于以往常規(guī)的方式了（這也包括以 Webpack 為底層構(gòu)建的 CRA 項目）。

由于 Vite 或者 Webpack 這類打包工具對靜態(tài)資源有特定的處理方式，在這里我們需要給引用資源的方式分為兩類：靜態(tài)引入和動態(tài)引入。

靜態(tài)引用圖片資源

靜態(tài)引入圖片資源就是使用像 Tailwind CSS、CSS 樣式或者指定<img>元素的src屬性這樣的。

需要注意的是在<img>元素中，src屬性使用@路徑別名是無效的，這是因為對于 Vite 來說src中的內(nèi)容就是單純的字符串，即使是配置了路徑別名也并不會當做資源文件去處理；當然如果想使用@路徑別名指定src也是有方法的，這時則需要通過動態(tài)引入的方式。

Tailwind CSS：

<div className='
  w-full h-full
  bg-[url("@assets/images/boat.png")]
  bg-contain bg-no-repeat bg-center'>
</div>

CSS：

div {
  background-image: url("@assets/images/boat.png");
}

<img>元素指定src屬性，使用常規(guī)的絕對路徑：

<img
  src="/src/assets/images/boat.png"
  alt="Preview"
  className='max-w-full max-h-full object-contain'
  />

<img>元素指定src屬性，使用@路徑別名是無效的：

<img
  src="@assets/images/boat.png"
  alt="Preview"
  className='max-w-full max-h-full object-contain'
  />

動態(tài)引用圖片資源

動態(tài)引用圖片資源就是用import、new URL(url, import.meta.url)這樣的方式。

import.meta.url 是一個 ESM 的原生功能，會暴露當前模塊的 URL。將它與原生的 URL 構(gòu)造器組合使用，在一個 JavaScript 模塊中，通過相對路徑我們就能得到一個被完整解析的靜態(tài)資源 URL。

import：Vite 中引入一個靜態(tài)資源會返回解析后的公共路徑，生產(chǎn)構(gòu)建后生成散列文件名：

import boatImage from '@assets/images/boat.png';

const Main = () => {
  return (
    <img
      src={boatImage}
      alt="Preview"
      className='max-w-full max-h-full object-contain'
      />
  );
};

export default Main;

new URL(url, import.meta.url)：

const boatImage = new URL('@assets/images/boat.png', import.meta.url).href;

const Main = () => {
  return (
    <img
      src={boatImage}
      alt="Preview"
      className='max-w-full max-h-full object-contain'
      />
  );
};

export default Main;

Vite 動態(tài)引用本地圖片案例

我們以一個菜單列表為案例演示 Vite 項目中動態(tài)引用圖片資源。在業(yè)務需求中，菜單列表中會展示固定的一些圖標，這些就是本地圖片資源。

菜單數(shù)據(jù)列表

在菜單數(shù)據(jù)列表中，icon屬性就是本地圖片路徑，這里用了一個自定義函數(shù)獲取，后面會給到。

const menuItems = [
  {
    id: 'profile',
    name: 'Profile',
    icon: getAssetsFile('menu/Profile.png')
  },
  {
    id: 'favorites',
    name: 'Favorites',
    icon: getAssetsFile('menu/Favorites.png')
  }
]

頁面結(jié)構(gòu)

頁面結(jié)構(gòu)中，主要分為菜單圖片和菜單的描述文本。

在這里菜單圖標是通過行內(nèi)樣式指定圖片路徑的，如果使用靜態(tài)引用的方式那么icon就是絕對路徑，如果是動態(tài)引用，那么icon的路徑就是需要通過new URL()獲取。

<div className='flex w-[72px] h-full pt-[24px] pr-0 pb-[24px] pl-0 flex-col gap-[24px] items-center flex-nowrap bg-[#fff] border-solid border-r border-r-[rgba(0,0,0,0.1)] absolute top-[64px] left-0 overflow-hidden z-[36]'>
  {menuItems.map((item) => (
  <div
    key={item.id}
    className={`flex h-[49px] flex-col justify-center items-center self-stretch shrink-0 flex-nowrap relative cursor-pointer border-l-4 ${activeMenu === item.id ? 'border-l-[#ffd05a]' : 'border-l-transparent'}`}
    onClick={() => handleMenuClick(item.id)}
  >
    {/* 菜單圖標 */}
    <div
      className="w-[32px] h-[32px] shrink-0 bg-cover bg-no-repeat relative overflow-hidden"
      style={{ backgroundImage: `url(${item.icon})` }}
    />
    {/* 菜單描述 */}
    <span className="h-[20px] shrink-0 basis-auto font-['Inter'] text-[14px] font-normal leading-[20px] text-[#323232] relative text-left whitespace-nowrap">
      {item.name}
    </span>
  </div>
  ))}
</div>

動態(tài)獲取圖片路徑

前面我們提到icon的路徑是由一個自定義函數(shù)getAssetsFile獲取的。實際上就是通過new URL()的方式動態(tài)獲取圖片路徑。

// 獲取assets靜態(tài)資源
export const getAssetsFile = (url: string) => {
  return new URL(`../assets/images/${url}`, import.meta.url).href;
};

回顧總結(jié)

最后回顧總結(jié)一下：

靜態(tài)資源常見存放目錄
- public
- src/assets
引用圖片資源的常規(guī)方式
- <img>元素指定src
- background: url()、background-image: url()樣式
- JS 腳本動態(tài)指定src屬性
Vite 靜態(tài)引用圖片資源
- background: url()、background-image: url()樣式
- <img>元素指定src屬性，使用絕對路徑或相對路徑
Vite 動態(tài)引用圖片資源
- import導入
- new URL(url, import.meta.url)