我正在使用Rails 5和Zurb的Foundation框架构建我的第一个网站，在过去的两天里，当我试图在Rails视图中集成Foundation的Interchange插件时，我一直遇到障碍，并且我可以'似乎要加载图像。我在图片中的所有内容都是alt:属性的内容。另外，我正在使用Heroku来托管我的网站。
到目前为止，我已经完成了以下工作：
Foundation.Interchange.SPECIAL_QUERIES，如下所示：
Foundation.Interchange.SPECIAL_QUERIES['smallretina'] = 'only screen and (min-width: 1px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 1px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 1px) and (-o-min-device-pixel-ratio: 2/1), only screen and (min-width: 1px) and (min-device-pixel-ratio: 2), only screen and (min-width: 1px) and (min-resolution: 192dpi), only screen and (min-width: 1px) and (min-resolution: 2dppx)';
Foundation.Interchange.SPECIAL_QUERIES['mediumretina'] = 'only screen and (min-width: 641px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 641px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 641px) and (-o-min-device-pixel-ratio: 2/1), only screen and (min-width: 641px) and (min-device-pixel-ratio: 2), only screen and (min-width: 641px) and (min-resolution: 192dpi), only screen and (min-width: 641px) and (min-resolution: 2dppx)';
Foundation.Interchange.SPECIAL_QUERIES['largeretina'] = 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 1025px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 1025px) and (-o-min-device-pixel-ratio: 2/1), only screen and (min-width: 1025px) and (min-device-pixel-ratio: 2), only screen and (min-width: 1025px) and (min-resolution: 192dpi), only screen and (min-width: 1025px) and (min-resolution: 2dppx)';
Foundation.Interchange.SPECIAL_QUERIES['xlargeretina'] = 'only screen and (min-width: 1921px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 1921px) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 1921px) and (-o-min-device-pixel-ratio: 2/1), only screen and (min-width: 1921px) and (min-device-pixel-ratio: 2), only screen and (min-width: 1921px) and (min-resolution: 192dpi), only screen and (min-width: 1921px) and (min-resolution: 2dppx)';
我已确保在$(function(){ $(document).foundation(); }); application.js <img>之前加载了上述内容。
我尝试使用常规HTML data-interchange代码加载插件，但我似乎无法将<img data-interchange=
"[assets/headorbit/smallnormal.jpg, small],
[assets/headorbit/mediumnormal.jpg, medium],
[assets/headorbit/largenormal.jpg, large],
[assets/headorbit/smallretina.jpg, smallretina],
[assets/headorbit/mediumretina.jpg, mediumretina],
[assets/headorbit/largeretina.jpg, largeretina]">属性指向正确的资产路径。
[assets/headorbit/*.png]
我尝试用我能想到的所有可能的路径组合替换headorbit。此外，我已将push文件夹放在公用文件夹中，但我似乎也无法指向该位置。此外，由于某些原因，当图像位于公共文件夹中时，image_tag到Heroku失败。
由于未能使用常规HTML指向正确的路径，我尝试使用Rails助手。首先我尝试使用<img src="">，但它转换为HTML中的src，而在Foundation的代码段中，为了向图像添加Interchange，没有<img data-interchange[..]属性，它只是{{1} }。使用image_tag(""...)帮助时，如果我将src:""留空，则图像仍然无法加载，如果我将路径传递给图像，则如image_tag(headorbit/smallnormal.png)中所示，交换不会工作，但我指向的图像被加载，但当我检查页面源时，我注意到Rails的资产管道为我的文件名添加了一个随机数：
<img src="/assets/headorbit/smallnormal-6bf4b83c1c324add60d876a1072d16a55c7279809611674bdac9b5064f2156e7.png" alt="Space">
我已经知道这称为指纹识别，我不知道如何仅为图像禁用它。
我怀疑Interchange插件搞砸了购买Rails管道在每张图片上应用的指纹，但是在通过每个asset_path skip_pipeline: true之后它仍然无效，我可以不能加载任何图像。
<img>来覆盖HTML中的src标记（没有tag('img')），所以我也尝试过，认为{ {1}}导致了问题，但这也无效。回到绘图板，经过两天和数百个打开的标签后，我放弃了，决定在最后一次绝望的尝试中向这里寻求帮助。
在发布这篇文章时，我的代码如下所示：
src
此外，我尝试过使用<%= tag('img',
alt: "Imagine Header",
class: "orbit-image head-orbit-image",
data: { interchange:
"[#{asset_path("/assets/headorbit/smallnormal.png")}, (small)],
[#{asset_path("/assets/headorbit/mediumnormal.png")}, (medium)],
[#{asset_path("/assets/headorbit/largenormal.png")}, (large)],
[#{asset_path("/assets/headorbit/smallretina.png")}, (smallretina)],
[#{asset_path("/assets/headorbit/mediumretina.png")}, (mediumretina)],
[#{asset_path("/assets/headorbit/largeretina.png")}, (largeretina)]" }) %>或path_to_image代替image_path的各种路径组合，但没有运气。
我会在这里停下来因为我认为我的浏览器会崩溃，按键时已经落后了5秒。
谢谢你，我很抱歉相当长的帖子。