如何从无法使用的图像助手中获取图像路径

Question

我尝试使用此树形文件夹创建一个React应用程序：

现在，我创建此助手：

from PIL import Image
from io import BytesIO
import numpy as np

from google.cloud import storage
client = storage.Client()
bucket = client.get_bucket("BUCKETS")
blob = bucket.get_blob('dogscats/train/<you-will-need-to-point-to-a-file-and-not-a-directory>')
data = blob.download_as_string()

img = Image.open(BytesIO(data))
img = np.array(img)

只需导入这样的组件

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

但这不起作用...为什么？怎么了？如何获得资产路径并导入组件？ 感谢所有想回应的人。 马可。

Answer 1

您有3个选择：

1. 我不建议您这样做，因为从理论上讲，您应该仅在服务器上拥有“公共”目录中的内容，而这实际上仅适用于单页应用程序：

更改您的辅助方法以导航到src目录： 导出const imagePath =（路径）=> {       返回../src/assets/${path} }

1. 尝试使用require方法获取图像。因此，除了使用imagePath之外，您还应该尝试类似的操作：

确保具有相对于img组件的路径。并确保您的Webpack配置中有文件加载器

1. 使用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位于同一目录中。