有没有一种方法可以让我在博客文章中提取第一张图片，并将其作为标题放在博客文章里

Is there a way I could pick up the first image in a blogpost and put it as a header in a blog post?

本文关键字：文章 标题 一张 方法 一种 提取 有没有      更新时间：2023-09-26

所以我想做的是让博客文章中的第一个图像看起来像每个博客文章页面的标题。。。。

这就是我目前所拥有的：

<b:if cond='data:post.firstImageUrl'>
<img expr:src ="data:post.firstImageUrl" expr:alt="data:post.title"/>
</b:if>

但它并没有真正起作用。有人能帮帮我吗？请参阅此示例。我希望我帖子中的第一张图片看起来像页面上的标题。。。。

我也遇到了麻烦。我想你想用这个图像作为背景图像。我用一些jquery解决了这个问题。你的目标与我的有点不同，所以我建议你在你的第一个图像中添加一个类（可能想手动或使用javascript），获取源，将其作为背景图像添加到你的标题中，并隐藏图像标签（如果打算重复，请不要这样做）

标记将类似于：

<header class="imgbg"></header>
<div class="post">
  <h1>Title</h1>
  <p>Text</p>
  <img src="#" class="first-img">
</div>

和jquery:

function getimgsrc(){
    $('.post').find('.first-img').each(function(n, image){
        var image = $(image);
        var thisurl = $(this).attr('src');
        $('.imgbg').css('background-image', 'url(' + thisurl + ')');      
        $('.first-img').remove();
    });
}

我构建了一个代码笔来更好地说明这一点：http://codepen.io/bekreatief/pen/BaFnx

相关文章：