能不能直接在HTML页面上显示二进制的图片

Posted 2023-05-03

个人觉得，不可能的！
图像的显示要借助底层一些API调用，特别是你自己写在浏览器的html语法中的东西
浏览器只是按照html格式进行解析，而不会有其他任何的动作，至于图片怎么被显示出来的
是因为IE按照<img src="url">指定的URL来请求服务器的资源而已。真正的显示还是和系统
的API调用有关，你可以通过spy++来观察IE的。你可以做成一个连接，点击那个连接以后
请求的资源被发送到客户端，你可以调用相应的程序来显示，这种例子很多，比如点连接可以
得到word/pdf/image等各种资源的。
如果要实现你想得那样，你的自己写个Tag，然后利用IE插件解析，我不知道行不行
就是乱说说的！ 参考技术A 可以显示
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAIAAAC6iKlyAAAFL0lEQVR42u3Zb2hXVRgH8EsbGoNe%0D%0ABJWmKeGcL1TajKGbmlGjjAWDRstQ7IWoc%2BALw6SgF669iWqRYKUuCWJtGDrDSCgkN6SUEnHG1PbC%0D%0AgVgJib5okkZ%2F7IEnHp7Ouee5zzn33LsJHb778dv9nXt%2Fd5%2Ffw3PP%2FS25dduO6rH%2Bp4%2F9UeY7ftva%0D%0AjAnYN4Gfrp0vQm5H65Kh84gn9Ay5MSvrL1AmrfLiXRsAGh6NNOzrN7ZMyOl98MwUCD7%2F%2FLXLSeok%0D%0AEofnHL04%2BrXDVa1nTsMjJH9Fg3Xq9g0...">
实现方法：在src前添加data:image/jpeg;base64,+已经encode的二进制代码，就可以在网页端显示出图片

在静态 html 页面上显示最新的 wordpress 特色图片

【中文标题】在静态 html 页面上显示最新的 wordpress 特色图片

【英文标题】：Display latest wordpress featured images on static html page

【发布时间】：2018-10-16 07:16:38

【问题描述】：

我的网站子文件夹中安装了一个 wordpress 博客页面（从 html 转换）和一个静态 html 主页。 我想在主页上显示 3 个最新帖子及其特色图片。 使用下面的代码我可以显示最新帖子文本，但 我不知道如何显示帖子的特色图片。 在一个 wordpress 自定义主题的 index.php 中，我将精选照片放在一个 div 中：

<div id="blogphoto"><?php the_post_thumbnail(); ?></div>

这是静态 html index.php 页面上的代码，它正在拉出最新的帖子。谁能帮我获取这些帖子的特色图片？

<div id="wp-post">

      <?php
      
      $args = array('numberposts'=>1);
      $recent_posts=wp_get_recent_posts($args);
      foreach( $recent_posts as $recent_post )
      echo "<h3>".$recent_post['post_title']."</h3> <br>"; 
      echo "<span>".$recent_post['post_date']."</span> <br>";
      echo  "<p>".$recent_post['post_content']."</p><br><br>";
      
      
      ?>
     </div>
    
    <div id="wp-post2">
    <?php
    
    $args = array('numberposts'=>1 , 'offset'=>1 );
    $recent_posts=wp_get_recent_posts($args);
    foreach( $recent_posts as $recent_post ) 
    echo "<span>".$recent_post['post_title']."</span> <br>";
    echo  "<p>".$recent_post['post_content']."</p><br><br>";
    

    ?>
    </div>

    <div id="wp-post3">
    <?php
    
    $args = array('numberposts'=>1 , 'offset'=>2 );
    $recent_posts=wp_get_recent_posts($args);
    foreach( $recent_posts as $recent_post ) 
    echo "<span>".$recent_post['post_title']."</span> <br>";
    echo  "<p>".$recent_post['post_content']."</p><br><br>";
    

    ?>
    </div>

【问题讨论】：

How to get WordPress post featured image url的可能重复

【参考方案1】：

请尝试使用此代码the_post_thumbnail获取特征图像

<?php
if ( $query->have_posts() ) 
    $i = 1;
    while($query->have_posts())  
        echo '<div id="wp-post-'.$i.'">';
        $query->the_post();
        ?><h2><?php the_title(); ?></h2>
        <?php
        if ( has_post_thumbnail() )  // only print out the thumbnail if it actually has one
            echo '<p>post says it has a featured image</p>'; // double checking
            the_post_thumbnail('thumbnail');
         else 
            echo '<p>this post does not have a featured image</p>';
        
        echo '</div>';
        $i++;
    
 else 
    echo '<p>no posts found</p>';

?>

【讨论】：

我在 下复制了您的代码，但出现错误：致命错误：未捕获的错误：在 /Applications/MAMP/ 中调用成员函数 have_posts() on null htdocs/SajtKomunalca/index.php:140 堆栈跟踪：#0 main 在第 140 行的 /Applications/MAMP/htdocs/SajtKomunalca/index.php 中抛出。您能否更准确地告诉我在哪里复制您的代码以及如何复制把它和我的结合起来？