Tauri开发构建显示图片但最终构建不显示的问题求助

1. 修正React中图片的引用路径 #

React项目里，public文件夹下的静态资源需用根相对路径引用，而非项目源码路径。修改你的img标签：

<img className="clickable" id="back" src="/icons/back.png" />

原因：开发环境下src/public路径可被dev server解析，但生产构建后，React会把public目录文件直接放到构建产物根目录，原src/public/xxx路径在打包环境中不存在。

2. 确保tauri.conf.json的资源配置正确 #

检查tauri.conf.json里的build.resources配置，确保包含图标文件。正确配置示例：

{
  "build": {
    "resources": ["public/icons/**/*"]
  }
}

该配置会将public/icons下所有文件纳入打包资源，打包后这些文件会放在应用资源目录，与前端静态文件保持对应路径关系。

3. 使用Tauri Asset协议引用资源（更可靠） #

若上述方法无效，可使用Tauri的tauri://asset协议引用资源，确保打包后路径解析正确：

<img className="clickable" id="back" src="tauri://asset/icons/back.png" />

注意：必须确保该资源已包含在build.resources配置中，否则Tauri无法通过asset协议找到它。

4. 通过Tauri API获取资源绝对路径 #

如果以上方法都不生效，可通过Tauri的path模块获取资源绝对路径，动态设置给img标签：

1. 前端引入Tauri API：

import { invoke } from '@tauri-apps/api/tauri';
import { join, appDir } from '@tauri-apps/api/path';

2. 在组件中获取并设置路径：

import { useEffect, useState } from 'react';

function BackButton() {
  const [iconPath, setIconPath] = useState('');

  useEffect(() => {
    async function getIconPath() {
      const path = await join(await appDir(), 'resources', 'icons', 'back.png');
      setIconPath(path);
    }
    getIconPath();
  }, []);

  return <img className="clickable" id="back" src={iconPath} />;
}

这种方式通过Tauri API直接获取资源的系统绝对路径，完全规避路径解析问题。

内容的提问来源于stack exchange，提问作者kiran_isaac