Importing Asset as URL

การนำเข้าไฟล์ static asset จะคืนค่าเป็น URL สาธารณะเมื่อถูก serve

import heroImage from "./assets/images/hero.png";
document.getElementById("hero-img").src = heroImage;

ตัวอย่างเช่น heroImage จะเป็น /src/assets/images/hero.png ในโหมด development และเปลี่ยนเป็น /assets/hero.2d8efhg.png ใน production build

Explicit URL Imports

ไฟล์ที่ไม่อยู่ในรายการ assets มาตรฐาน สามารถนำเข้าเป็น URL โดยใช้ suffix ?url

import paintWorklet from "../../node_modules/extra-scalloped-border/worklet.js?url";
CSS.paintWorklet.addModule(paintWorklet);

Explicit Inline Handling

สามารถระบุได้ว่าจะให้ไฟล์ถูก inline หรือไม่โดยใช้ suffix ?inline หรือ ?no-inline

import banner from "../assets/banner.png?inline"; // ถูก inline
import logo from "../assets/logo.svg?no-inline"; // ไม่ถูก inline

Importing Asset as String

นำเข้าไฟล์เป็น string โดยใช้ suffix ?raw

import vertexShader from "./vertex.glsl?raw";

Importing Script as a Worker

นำเข้า script เป็น web worker โดยใช้ suffix ?worker หรือ ?sharedworker

import ImageWorker from "./imageProcessor.js?worker";
const worker = new ImageWorker();

The public Directory

ใช้สำหรับไฟล์ที่:

• ไม่ถูกอ้างอิงใน source code (เช่น robots.txt)
• ต้องเก็บชื่อไฟล์เดิม (ไม่ถูก hash)

ไฟล์ในนี้จะถูก serve ที่ root path / โดยตรง

// อ้างอิงไฟล์ใน public directory
const favicon = "/favicon.ico";
const robots = "/robots.txt";

new URL(url, import.meta.url)

ใช้ import.meta.url ร่วมกับ URL constructor เพื่อรับ URL เต็มของ asset

const getAssetUrl = (name) => {
  return new URL(`../assets/${name}.png`, import.meta.url).href;
};

สามารถใช้กับ dynamic URLs ได้ถ้า path เป็น static

function getImageUrl(name) {
  return new URL(`../assets/${name}.png`, import.meta.url).href;
}