如何在Stencil组件中引入图片？路径引用失败求助

核心问题在于Storybook不会自动识别项目自定义的公共资源目录，需要先配置静态资源路径，再配合正确的引用方式。

步骤1：配置Storybook静态资源目录 #

修改.storybook/main.js（或.main.ts），添加staticDirs配置，指向你的public-storybook目录：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  staticDirs: ['../public-storybook'] // 关键配置：将该目录设为静态资源根目录
};

步骤2：使用正确的路径引用图片 #

配置完成后，所有引用都基于public-storybook目录的根路径编写：

• 用getAssetPath的写法：

  private defaultProfileImage: string = getAssetPath('images/navbar/default_image.png');
  

• 直接声明状态的写法：

  @State() defaultProfileImage: string = 'images/navbar/default_image.png';
  

• img标签直接引用：

  <img src="images/navbar/default_image.png" alt="默认头像" />
  

额外排查点 #

• 确认文件实际路径：检查public-storybook/images/navbar/default_image.png是否存在，文件名大小写、扩展名是否完全匹配（比如别把.png写成.PNG）。
• 清除缓存重启：关闭Storybook，删除node_modules/.cache/storybook目录，再重新启动服务。

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