Início / coding / Perguntas / 79324758
Accepted
Kelvin Tanjueco
Asked: 2025-01-03 03:24:28 +0800 CST

Como analisar um caminho de imagem dinâmico no Rails 8 dentro do controlador Stimulus (Popshaft Asset Pipeline)?

  • 772

Estou tentando executar uma sequência .png dentro de uma tela com a rolagem como gatilho para alterar a imagem exibida atualmente de Ring_00001.png para Ring_00002.png e assim por diante.

Na página do Popshaft Rails no GitHub foi ensinado que você pode referenciar um caminho dentro de um javascript usando pseudo-método:

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

No entanto, não consigo entender como referenciar corretamente uma URL de imagem se o nome do arquivo muda dependendo da ação de rolagem.

tentei

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)
    };

Gostaria de acrescentar que tentar carregar RAILS_ASSET_URL("/RingSeq/Ring_00001.png") está funcionando, então o único problema aqui é como referenciar esse auxiliar corretamente com a variável javascript.

Muito obrigado!

javascript

1 respostas

  1. Best Answer

    RAILS_ASSET_URL()não é uma função real, ela é usada apenas pelo propshaft como um espaço reservado para encontrar caminhos de imagem e substituí-los pelo caminho digerido.

    Você terá que pré-construir todas as imagens necessárias com antecedência:

    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]

    Você também pode colocar essas imagens em publicum diretório, dessa forma não precisará ficar dançando pelo caminho de resumo dos ativos do Rails, mas a responsabilidade de invalidar o cache caso essas imagens sejam alteradas será sua (acrescentando ?v=2ao caminho).

    • 0

relate perguntas