Imagens da capa não carrega na minha tela de detalhe

Koha
#1

Boa tarde pessoal, queria saber como essas imagens da div com id=“biblio-cover-slider” sao carregadas pois copiei para outro arquivo meu e nao estava funcionando, fica no loading infinito.
O codigo abaixo do que esta funcionando.

<div id="biblio-cover-slider" class="cover-slider cover-slides" data-isbn="[% normalized_isbn | html %]">
            [% IF ( OPACLocalCoverImages ) %]
            [% IF localimages.count %]
            [% IF OPACLocalCoverImages %]
            [% IF localimages.count %]
            [% FOREACH image IN localimages %]
            <div class="cover-image local-coverimg" style="display: block;">
              <a href="/cgi-bin/koha/opac-image.pl?imagenumber=[% image.imagenumber | uri %]">
                <img src="/cgi-bin/koha/opac-image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | uri %]"
                  alt="Imagem de capa local">
              </a>
              <div class="hint">Imagem de capa local</div>
            </div>
            [% END %]
            [% ELSE %]
            <div class="cover-image local-coverimg" style="display: block;">
              <img alt="Capa do livro" src="/cgi-bin/koha/opac-image.pl?biblionumber=[% biblio.biblionumber %]"
                onerror="this.onerror=null;this.src='https://raw.githubusercontent.com/bywatersolutions/web-assets/master/NoImage.png';"
                style="max-height: 300px;">
            </div>
            [% END %]
            [% END %]

            [% END %]
            [% END %]

            [% IF ( OPACAmazonCoverImages && normalized_isbn) %]
            <div class="cover-image" id="amazon-bookcoverimg">
              <a href="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn | uri %].01.LZZZZZZZ.jpg"
                title="Amazon cover image">
                <img src="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn | uri %].01.MZZZZZZZ.jpg"
                  alt="Amazon cover image"
                  data-link="http://www.amazon[% AmazonTld | uri %]/gp/reader/[% normalized_isbn | uri %][% AmazonAssocTag | uri %]#reader-link" />
              </a>
              <div class="hint">Image from Amazon.com</div>
            </div>
            [% END %]

            [% IF ( SyndeticsEnabled && SyndeticsCoverImages ) %]
            [% IF ( content_identifier_exists ) %]
            <div class="cover-image" id="syndetics-coverimg">
              <a href="https://secure.syndetics.com/index.aspx?isbn=[% normalized_isbn | uri %]/[% SyndeticsCoverImageSize | uri %].GIF&amp;client=[% SyndeticsClientCode | uri %]&amp;type=xw10&amp;upc=[% normalized_upc | uri %]&amp;oclc=[% normalized_oclc | uri %]"
                title="Syndetics cover image">
                <img
                  src="https://secure.syndetics.com/index.aspx?isbn=[% normalized_isbn | uri %]/[% SyndeticsCoverImageSize | uri %].GIF&amp;client=[% SyndeticsClientCode | uri %]&amp;type=xw10&amp;upc=[% normalized_upc | uri %]&amp;oclc=[% normalized_oclc | uri %]"
                  alt="Syndetics cover image" />
              </a>
              <div class="hint">Image from Syndetics</div>
            </div>
            [% END %]
            [% END %]

            [% IF ( GoogleJackets ) %]
            <div class="cover-image" id="googlejacket-coverimg">
              <div title="[% img_title | html %]" class="[% normalized_isbn | html %]" id="gbs-thumbnail-preview"
                data-use-data-link="1"></div>
              <div class="hint">Image from Google Jackets</div>
            </div>
            [% END %]

            [% IF ( Koha.Preference('OPACCoce') && Koha.Preference('CoceProviders') && normalized_isbn ) %]
            [% coce_id = normalized_ean || normalized_isbn %]
            <div class="cover-image coce-coverimg">
              [% IF ( coce_id ) %]
              <a title="Image from Coce" class="[% coce_id | html %]" id="coce-thumbnail-preview"></a>
              [% END %]
              <div class="hint">Image from Coce</div>
            </div>
            [% END %]

            [% IF OpenLibraryCovers %]
            <div class="cover-image" id="openlibrary-coverimg">
              <div title="[% img_title | html %]" class="[% normalized_isbn | html %]"
                id="openlibrary-thumbnail-preview" data-use-data-link="1"></div>
              <div class="hint">Image from OpenLibrary</div>
            </div>
            [% END %]

            [% bt_id = ( normalized_upc || normalized_isbn ) %]
            [% IF ( BakerTaylorEnabled && bt_id ) %]
            <div class="cover-image" id="bakertaylor-coverimg">
              [% IF BakerTaylorBookstoreURL %]
              <a href="https://[% BakerTaylorBookstoreURL | url %][% bt_id | url %]">
                <img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL | url %][% bt_id | uri %]" />
              </a>
              [% ELSE %]
              <a href="[% BakerTaylorImageURL | url %][% bt_id | uri%]">
                <img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL | url %][% bt_id | uri %]" />
              </a>
              [% END %]
              <div class="hint">Image from Baker &amp; Taylor</div>
            </div>
            [% END %]

            [% IF Koha.Preference('OPACCustomCoverImages') && Koha.Preference('CustomCoverImagesURL') %]
            [% SET custom_cover_image_url = biblio.custom_cover_image_url %]
            [% IF custom_cover_image_url %]
            <div class="cover-image" id="custom-coverimg">
              <a class="custom_cover_image" href="[% custom_cover_image_url | url %]" title="Custom cover image">
                <img id="custom-img" alt="Custom cover image" src="[% custom_cover_image_url | url %]" />
              </a>
              <div class="hint">Custom cover image</div>
            </div>
            [% END %]
            [% END %]
          </div>

O meu console do edge fica dessa forma e a imagem fica no loading infinito

[Intervention]Images loaded lazily and replaced with placeholders. Load events are deferred. See https://go.microsoft.com/fwlink/?linkid=2048113

#2

Oi @Vinicius_Farias ,

Acredito que essas divs que você enviou sejam parte das suas modificações no opac-detail.tt (mas poderia ser também na interface de admin detail.tt).

Eu vou comentar o que acredito que esteja incorreto nessas modificações, mas já adianto que existe um jeito bem mais simples de definir uma capa padrão no Koha, sem precisar alterar o template. Vou explicar isso no final da resposta.

Comparei com o arquivo padrão (koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt) e notei que há dois blocos IF/END duplicados:

Não acho que essa duplicação chega a quebrar alguma coisa, mas é desnecessária.

Sobre o problema do loading infinito

O ponto principal é o onerror deste img:

O onerror só é disparado quando o navegador recebe um erro real (404, 403, etc.).

Mas o script opac-image.pl não retorna 404 quando a capa não existe. Ele fica abrindo um fluxo vazio, então o navegador fica carregando para sempre, e por isso o onerror nunca dispara.

Portanto, a imagem fica com loading infinito.

Ajuste no código

No [% ELSE %] do [% IF localimages.count %], em vez de tentar deixar o navegador decidir, já coloque a imagem padrão diretamente:

<img src="https://raw.githubusercontent.com/bywatersolutions/web-assets/master/NoImage.png"
     alt="Sem capa disponível"
     style="max-height: 300px;">

Assim não depende do retorno do opac-image.pl.

Solução recomendada

Se o objetivo é definir uma imagem padrão para capas ausentes, o Koha já permite isso via configuração:

Admin > Preferências do sistema > Enriquecimento de conteúdos

  • CustomCoverImages → Ativar (para mostrar na interface admin)
  • OPACLocalCoverImages → Ativar (para mostrar no OPAC)
  • CustomCoverImagesURL → coloque a URL da imagem padrão, pode usar por exemplo a do seu código https://raw.githubusercontent.com/bywatersolutions/web-assets/master/NoImage.png

Isso evita modificar .tt, facilita manutenção e não quebra em atualizações futuras.

Exemplo funcionando

Fiz aqui em um Koha de testes, alterei as configurações no Admin como mencionei:

Configurações de Capas de obras armazenadas localmente
Configurações de Capas de obras armazenadas localmente1574×303 66.3 KB

Resultado no OPAC mostrando a capa com imagem padrão, sem eu ter alterado nada no opac-detail.tt:

Resultado no OPAC
Resultado no OPAC764×398 56.4 KB