如何编写正确的图片渲染路径？跨仓库组件图片显示问题排查

问题核心：类库组件与业务仓库的构建上下文不同，直接传入public/picture.png这类相对路径会被错误解析，导致图片无法加载。以下是几种可行修复方法：

方法一：直接使用根路径访问（最简单） #

React项目中，public目录下的资源最终会被打包到产物根目录，因此可以直接用根路径访问图片，不需要带public/前缀：

修改业务仓库中的组件调用代码：

<EmptyState
  picture="/picture.png"
  title="Title"
  description="Description multi-line Description
    multi-line Description
    multi-line"
  handleOnClick={() => {
    // TODO: Define your click handler function here
  }}
  buttonText="Button"
/>

方法二：通过导入图片资源传递（更规范） #

让类库组件接收Webpack/Vite处理后的图片URL，避免手动路径错误：

1. 类库组件无需修改核心逻辑，只需确保picture props接收字符串类型即可：

// 类库组件props定义示例
type EmptyStateProps = {
  picture: string;
  title: string;
  description: string;
  handleOnClick: () => void;
  buttonText: string;
};

2. 业务仓库中导入图片再传递：

// 根据文件实际位置调整导入路径，从当前文件到public下的picture.png
import picture from '../../../../public/picture.png';

<EmptyState
  picture={picture}
  title="Title"
  description="Description multi-line Description
    multi-line Description
    multi-line"
  handleOnClick={() => {
    // TODO: Define your click handler function here
  }}
  buttonText="Button"
/>

这种方式下，构建工具会自动处理图片资源，生成正确的访问URL，彻底避免路径解析问题。

方法三：适配自定义部署路径（非根目录场景） #

如果业务项目部署在子目录/子域名下，可通过环境变量拼接路径（以Create React App为例）：

修改业务仓库中的组件调用代码：

<EmptyState
  picture={`${process.env.PUBLIC_URL}/picture.png`}
  // 其他props保持不变
/>

process.env.PUBLIC_URL会自动读取项目配置的部署根路径，确保图片路径在任何部署环境下都正确。

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