FAM Tools
Sign in
NUI and CEFbeginner9 min readupdated 11 Sept 2026

Getting NUI asset paths right

The short answer

Paths in your HTML are relative to the ui_page file. Every file must be listed in files (wildcards allowed). Reference other resources with https://cfx-nui-<resource>/<path>. Match file-name case exactly — Linux servers are case-sensitive. For bundlers, build with relative asset paths: Vite base: './', Create React App "homepage": ".", Next.js static export with its /_next/ URLs made relative.

Most “my UI is blank” and “my images are missing” reports are path problems. NUI serves files from your resource over a special URL, only the files you list are sent to players, and the server’s file system may be case-sensitive. Once the rules are clear, 404s disappear.

Getting NUI asset paths right — illustrated with a FiveM-compatible minimap render

#Relative to the page

fxmanifest.lua
ui_page 'web/dist/index.html'

files {
    'web/dist/index.html',
    'web/dist/assets/*',
    'web/dist/images/*.webp',
    'web/dist/fonts/*.woff2',
}

Inside index.html, ./assets/app.js points to web/dist/assets/app.js. A leading slash (/assets/app.js) points to the root of the NUI origin instead and usually fails.

#Bundler settings

ToolSetting
Vitebase: './' in vite.config
Create React App"homepage": "." in package.json
Next.js (static export)output: 'export', images.unoptimized: true, and relative asset URLs — a relative assetPrefix, or a post-build step that rewrites /_next/ to ./_next/
Plain HTMLRelative paths everywhere
vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: './',
  build: { outDir: 'dist', assetsDir: 'assets' },
});

A full React/Vite setup is in React and Vite loading screens.

#Files from other resources

Use https://cfx-nui-ox_inventory/web/images/water.png to show another resource’s image. That resource must list the file in its own files. The older nui://resource/path form is deprecated in favour of https://cfx-nui-.

#Case sensitivity

Windows ignores letter case; Linux does not. An image referenced as img/Logo.png but saved as img/logo.png works on your Windows test server and breaks on a Linux host. Use lowercase file names everywhere.

#Fonts and external files

  • Ship fonts as .woff2 inside the resource for reliability, listed in files.
  • External URLs (a CDN, Google Fonts) work too, but add a network dependency during loading.
  • Large media (videos, music) is often better hosted on a CDN — see loading screen fonts and video backgrounds.

#Finding the missing file

Open the NUI devtools, go to the Network tab and reload the UI: every red 404 shows the exact URL requested. Compare it with your files list and file names — see NUI devtools.

Share this guideXRedditFacebook

Questions

Why are my NUI images not loading?
The file is not in files, the path is absolute instead of relative, or the case of the file name differs.
Why is my Vite/React NUI blank in game?
The build uses absolute /assets/ paths. Set base: './' and rebuild.
How do I use an image from another resource?
https://cfx-nui-<resource>/<path>, with the file listed in that resource’s files.
Can I use wildcards in files?
Yes, for example 'web/dist/assets/*'.

Ready to pick a map?

Twelve themes on three base map styles, $8 each, instant download.

Relevant to what you just read

The tool for this

A drag-and-drop loading screen, hosted for you From Free, built in the browser, exported as a drop-in resource.