console.log(await appConfigDir()); // ~/.config/appName/
console.log(await appDataDir()); // ~/.local/share/appName/

import { convertFileSrc } from '@tauri-apps/api/tauri';
import { appDataDir } from '@tauri-apps/api/path';
import { useEffect, useState } from 'react';

export function LocalImg(): JSX.Element {
  const [imgDir, setImgDir] = useState('');

  useEffect(() => {
    (async (): Promise<void> => {
      setImgDir(await appDataDir());
    })();
  }, []);

  return (
    <img src={convertFileSrc(imgDir + 'a.png')} />
  );
}

---
  "tauri": {
    "allowlist": {
      "protocol": {
        "asset": true,
        "assetScope": [
          "$APPDATA/*"
        ]
      }
    },
---