将相对的图像URL添加到哈希名称

时间:2018-09-27 17:16:46

标签: javascript reactjs webpack sass gulp

在我的ReactJS应用程序中,我为每个域创建了图像结构,并且在使用文件加载器的Webpack配置中,我将图像转换为哈希名称,并在构建过程后复制到某些资产文件夹中。

我需要在数据文件之一中对此图像进行引用,该数据文件是json文件格式,并且包含由image名称组成的imageurl属性。但是问题是在将其部署到仅存在构建输出文件夹的某些挂单服务器上之后,相对路径图像不再复制到Output目录(由于构建大小限制),因此图像url属性导致Image找不到错误。

除了添加一些构建脚本以将图像映射到哈希图像名称之外,还有什么方法可以添加对这些图像的引用?


 App
  |
 General Resource
  |     |
  |  SomeInfo -Json 
  |
 ImageResources
  |
  A
  |-- A.png
  |-- B.jpeg


On build - Output is

App
  |
 Assets
  |- 123.png (random hash code)
  |- 345.jpeg


因此我必须在SomeInfo.jso文件中添加对A.png的引用,但根据构建输出,〜A / A.png图像应转换为Assets / 123.png。

1 个答案:

答案 0 :(得分:0)

您需要图像将哈希添加到其文件名吗?如果不是,则应将发射文件设置为在处理图像时不包括哈希。我猜测您的file-loader正在处理您的图像。查看您的webpack配置,并查看要在这些文件上设置[hash]的位置。删除该哈希后,将有一个确定性的文件名可供参考。