TypeScript中Reducer内引用图片路径无法加载问题求助

问题原因 #

你直接在reducer里写硬编码的相对路径字符串，打包工具（比如Webpack、Vite）不会解析这个纯文本路径，打包后这个路径会变成相对于输出目录中reducer文件的位置，和实际图片的输出路径不匹配，导致加载失败。

解决方案 #

方案1：通过import引入图片（推荐） #

直接在reducer文件里import图片资源，打包工具会自动处理路径，生成正确的资源URL：

// src/model/reducer/reducer.ts
import myImage from '../../view/assets/image.png';

// 然后在逻辑中赋值
if (condition) {
  state.logoImg = myImage;
}

这样import后，myImage变量会被替换成打包后的图片资源路径（比如/static/media/image.abc123.png），能正确加载。

方案2：将图片放在public目录下使用绝对路径 #

如果你的项目有public目录（比如Create React App、Vite默认的public文件夹），可以把图片移到public/assets/image.png，然后在reducer里用绝对路径引用：

// src/model/reducer/reducer.ts
const myImage = '/assets/image.png';

if (condition) {
  state.logoImg = myImage;
}

public目录下的文件会被直接复制到输出根目录，绝对路径能直接指向资源。

注意事项 #

• 不要在reducer或其他非组件文件里硬写相对路径字符串，打包工具无法识别这类纯文本路径。
• 如果使用方案1，确保你的打包工具配置支持处理图片资源（主流框架的默认配置都支持）。

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