Замените атрибут data-original на src в мгновенном просмотре телеграммы

Мне нужно заменить атрибут data-original на src, используя код шаблона телеграммы.

У меня ошибка с шаблоном мгновенного просмотра телеграммы.

Image source not found: src attribute expected in <img data-plugin-lazyload="" data-plugin-options="{'effect' : 'fadeIn'}" data-original="https://site.com.br/thumbs/chamadas/xbox.jpg" alt="PS5 e Xbox Series X podem atrasar por causa do Coronavírus, estima analista" title="PS5 e Xbox Series X podem atrasar por causa do Coronavírus, estima analista"/>

Исходный сайт использует атрибут data-original во всех изображениях вместо атрибута src из-за ленивой загрузки скрипта. Я пытаюсь извлечь исходные данные из тега и заменить атрибут src на исходное значение данных.

Думаю, я могу получить узлы img, используя:

//section[has-class("section")]//img

И я могу получить узлы с исходными данными, если использую:

//section[has-class("section")]//img/@data-original

Результат отладки:

-------
Debug 6 nodes:
  [0]:  data-original="https://site.com.br/thumbs/chamadas/xbox.jpg"
  [1]:  data-original="https://site.com.br/uploads/2020/03/15/63185/consoles-next-gen-aberta.jpg"
  [2]:  data-original="https://site.com.br/thumbs/chamadas/B550chamada.jpg"
  [3]:  data-original="https://site.com.br/thumbs/chamadas/nvidia-rtx-ampere-chamada.jpg"
  [4]:  data-original="https://site.com.br/thumbs/chamadas/amd-zen-3-zen-4-roadmap-0.jpg"
  [5]:  data-original="https://site.com.br/thumbs/chamadas/xbox-srs-x-chamada1.jpg"

Я безуспешно пробовал много комбинаций, например:

@replace("data-original", "src"): $body//img/@data-original

И ближайшая попытка:

@replace("data-original", "src"): //section[has-class("section")][.//img]

Но в этом последнем коде он удаляет все теги img, и весь текст помещается в одну строку <p> только так, чтобы у всей статьи была только одна строка абзаца со всем содержанием и без изображений.

Теоретически "простая" (не простая) замена атрибута "data-original" на "src" сделает работу с шаблоном.

Ссылки могут помочь:

#1 Справочник по мгновенному просмотру

#2 Справка по мгновенному просмотру

#3 Мгновенный просмотр документов

#4 Средний шаблон мгновенного просмотра

Источник

1 ответ

Для решения проблемы рассмотрите возможность использования кода ниже:

@set_attr(src, @data-original): //div[has-class("section")]//img

Если у тебя есть srcset атрибут в вашем imgвы также можете использовать приведенный ниже код, Telegram будет автоматически использовать изображение с высоким разрешением:

# Use Instant View version 2.1
~version: "2.1"

# Disable Lazyload
@set_attrs(src, @data-original, srcset, @data-srcset): //div[has-class("entry-content")]//img
Источник

Я сделал это, используя следующий snnipet:

# first of all, site use an attribute object to renderize lazy loaded images. Let convert them to img src attrbute so we cna ride of src not set error
<abc>: //div[has-class("news__text")]//img # Find all images in content div class and convert it to <abc>

@set_attr(src, ./@data-original) # Set src attribute from data-original

$imagetag # var to current <abc>

<img>: //div[has-class("news__text")]//abc # Find abc and convert it to <img> again with seted src

Все основано на ответе @haacki47 в: https://stackru.com/questions/54786100/extract-create-and-append-using-xpath-and-telegram-instant-view

Источник
Другие вопросы по тегам