在电报即时视图中将属性“data-original”替换为 src答案

【问题标题】：Replace attribute "data-original" to src in telegram instant view在电报即时视图中将属性“data-original”替换为 src
【发布时间】：2020-03-20 16:53:01
【问题描述】：

我需要使用电报模板代码将“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 Instant View Reference

#2 Instant View Reference

#3 Instant View Docs

#4 Medium Instant View Template

【问题讨论】：

标签： xpath telegram xpath-2.0 instant-view

【解决方案1】：

考虑使用以下代码解决问题：

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

如果您的img 中有srcset 属性，您也可以使用以下代码，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

【讨论】：

【解决方案2】：

我使用以下 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://stackoverflow.com/questions/54786100/extract-create-and-append-using-xpath-and-telegram-instant-view

【讨论】：