主页 / coding / 问题 / 79324758
Accepted
Kelvin Tanjueco
Asked: 2025-01-03 03:24:28 +0800 CST

如何在 Rails 8 中的 Stimulus 控制器（Popshaft Asset Pipeline）中解析动态图像路径？

  • 772

我正在尝试在画布内运行 .png 序列，并以滚动作为触发器，将当前显示的图像从 Ring_00001.png 更改为 Ring_00002.png 等等。

在 Popshaft Rails GitHub 页面中，它教导你可以使用伪方法引用 javascript 中的路径：

export default class extends Controller {
    init() {
    this.img = RAILS_ASSET_URL("/icons/trash.svg")
  }
}

但是，如果文件名根据滚动操作而改变，我就无法理解如何正确引用图像 URL。

我试过

const currentFrame = index => (
    `${index.toString().padStart(5, '0')}.png`);

const animation = new Image();
    animation.src = RAILS_ASSET_URL(`/RingSeq/Ring_${currentFrame}`);
    animation.onload = function(){
      context.drawImage(animation, 0, 0)
    };

我想补充一点，尝试加载 RAILS_ASSET_URL(“/RingSeq/Ring_00001.png”) 是有效的，所以这里唯一的麻烦是如何使用 javascript 变量正确引用这个帮助程序。

非常感谢！

javascript

1 个回答

  1. Best Answer

    RAILS_ASSET_URL()不是一个实际的功能，它仅被 propshaft 用作占位符来查找图像路径并用摘要路径替换它们。

    您必须提前构建所有必要的图像：

    const images = {
  1: RAILS_ASSET_URL("/RingSeq/Ring_00001.png"),
  2: RAILS_ASSET_URL("/RingSeq/Ring_00002.png"),
  3: RAILS_ASSET_URL("/RingSeq/Ring_00003.png"),
  4: RAILS_ASSET_URL("/RingSeq/Ring_00004.png"),
}

const animation = new Image();
animation.src = images[index]

    您也可以将这些图像放入public目录中，这样您就不需要在 rails 的资产摘要路径中徘徊，但是如果这些图像发生变化，使缓存无效的责任就落在您身上（附加?v=2到路径）。

    • 0

相关问题