如何从我的图像助手那里获得无法工作的图像路径

Question

我尝试用这个树文件夹创建一个react应用程序：

​

​

现在我创建了这个助手：

export const imagePath = (path) => {
      return `./assets/${path}` 
}

只需像这样在我的组件上导入

import { imagePath } from './helpers';

<img className="h-6 w-6 rounded-full object-cover" src={imagePath('assets/img/profile.png')} alt="profile"></img>

但这不是work...why吗？怎么了？如何获取资产路径并导入组件？感谢所有想要回应的人。马尔科。

Answer 1

你有三个选择：

1. 我不建议这样做，因为在您的服务器上，理论上您只应该拥有来自“公共”目录的内容，这可能只适用于单页应用程序--实际上：

。

更改助手方法以导航到src目录: export = (path) => {返回../src/assets/${path} }

1. 尝试使用require方法获取图像。因此，与其使用您的imagePath，不如尝试这样的方法：

​

确保具有相对于img组件的路径。并确保您的webpack配置中有一个文件加载程序。

使用像https://github.com/webpack-contrib/copy-webpack-plugin这样的webpack插件将文件从资产复制到您的公共目录

Answer 2

我建议你用require代替。

export const imagePath = (path) => {
   return require(`./assets/${path}`); 
}

然后在你的渲染中：

src={imagePath('img/profile.png')}

注意事项：请记住，此助手必须位于与./assets相同的目录中。