Telegram 的即时视图：无法加载 .webp 和 .ico 图像

Question

我在尝试创建 Telegram 的即时视图模板时遇到问题，出现以下错误：

Resource fetch failed: https://gdude.de/blog/assets/images/Kaggle-Lyft/task.webp
Resource fetch failed: https://gdude.de/blog/assets/images/telegram.ico

网址有效，我已经检查过了。这是仅有的两个失败的图像。 IV 是否支持 *.webp 和 *.ico 图片？

Answer 1

根据他们的手册，Instant View 实际上只支持 gif、jpg 和 png。

with the attribute src and the optional attribute href to make the image clickable. Allowed formats: GIF, JPG, PNG (GIF would be converted into Video type by IV)

Answer 2

我遇到了类似的问题，通过以下方式解决了。
注意：您需要一个托管服务器来存储 PHP 脚本，一个免费的为我工作 (000Webhost)。

下图代表了总体思路

即时查看代码

注意：我是 Instant View 和 XPath 的初学者，所以现在我只是在编写有效的代码。

# Find unsupported images
$imgs: //img[ends-with(@src, ".webp")]
$imgs+: //img[ends-with(@src, ".ico")]

# Temporary element to create the URLs and make calls to the conversion service
@html_to_dom: "<a>"
$tmp_tag

# For each unsupported image 
@map($imgs){
  $img: $@
  
  # Build de URL to request the image conversion service
  @set_attr(href, "https://my-free-subdom.000webhostapp.com/imgconverter.php?url=", $img/@src): $tmp_tag/a
  
  # Make the request
  @load: $tmp_tag/a/@href
  
  # Change the src of the unsupported image to that of the converted image created by the conversion service
  @set_attr(src, $@//img/@src): $img
}

@remove: $tmp_tag

PHP 转换图像的脚本

为了处理 ICO 文件，我使用了 IcoFileLoader library, I found it thanks to this question . I just took the PHP files from the src directory and put them directly on my hosting, so I had to use a simple Autoloader.


    // The URL of the image to convert
    // If the url of the image is relative, you have 
    // to build it here, example $url = 'https://gdude.de'.$_GET['url'];
    $url = $_GET['url'];
    
    // File name
    $file_name = basename($url);
    
    // Directory where the image will be saved
    $dir = './';
     
    // File location
    $save_file_loc = $dir . $file_name;
     
    // Open file
    $fp = fopen($save_file_loc, 'wb');
    
    // Download the image using CURL
    $ch = curl_init($url);
    // Set options for a cURL transfer
    curl_setopt($ch, CURLOPT_FILE, $fp);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_exec($ch);
    curl_close($ch);
     
    // Close file
    fclose($fp);
    
    // Load the image
    // ICO images need special handling
    if(str_ends_with($file_name, '.ico'))
    {
        require_once('Autoloader.php');
        $loader = new IcoFileService;

        // You must define the size, I did the tests with a 16X16 favicon.
        $im = $loader->extractIcon($file_name, 16, 16);
    }
    else if(str_ends_with($file_name, '.webp'))
    {
        $im = imagecreatefromwebp($file_name);
    }
    
    // Check if the image was loaded
    if(!isset($im))
    {
         die('Unable to load image!');
    }
    
    // Convert it to a png file
    imagepng($im, $file_name.'.png');
    imagedestroy($im);

    // Delte the original image
    unlink($file_name);
    
    // "Return" the image in an HTML tag so that Instant View can handle it
    echo '<img src="https://my-free-subdom.000webhostapp.com/' . $file_name . '.png">';

随意改进上面的代码，也许添加一些安全性，删除旧图像，使用其他库或 PHP 函数，在同一请求中接受多个图像等。

Telegram 的即时视图：无法加载 .webp 和 .ico 图像

Telegram's instant view: fails to load .webp and .ico images

xpath

telegram

xpath-2.0

instant-view

telegram-instant-view

即时查看代码

PHP 转换图像的脚本