Question

我有一个引导卡类，该类的顶部带有标题的图像。我想通过调用javascript函数从DOM元素快速将图像渲染/显示为bootstrap card-img-class。我的图像通过markdown编辑器像内容一样保存在数据库中。在markdown编辑器中可能引用了多个图像，但是card-img-class应该具有DOM元素中的第一个图像。

 class="col-lg-3" style="margin-bottom: 9px !important">
<div class="card h-100 w-80">
   **<img class="card-img-top" src="getCardImage()" alt="Card Image Top">**
   <div class="card-body rounded-bottom">
       <div class="Heading">
           <a href="@($"/Tech/{(Model.Slug == UrlHelpers.HomePageSlug ? "" : Model.Slug)}")">@Model.Title</a>
       </div>
       <hr />
       <div class="main-content">
           <p class="card-text text-justify">
               <markd`enter code here`own markdown="Description" />
           </p>
           <p class="readMore">
               <a href="@($"/Tech/{(Model.Slug == UrlHelpers.HomePageSlug ? "" : Model.Slug)}")">Read More>> </a>
           </p>
       </div>

我的JavaScript代码如下：-

(function() {
    var getCardImage = function () {
        var Image = document.querySelectorAll("p img:nth-child(0)");        
        return Image;
    };
    getCardImage();
})();

浏览器中显示的HTML：

 <p>
         <img alt="" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSvtIcyZ6HwrUNB2r-YUpWbSfEPkadb0KtuBSvGjKsjT7Ex7VyFw">
        </p>   
    <p>
      .card-img-top places an image to the top of the card. With .card-text,  
    text   can be added to the card. Text within .card-text can also be   
      styled with the standard HTML tags
</p>
    <p>
    <img alt="" src="https://s3.amazonaws.com/creativetim_bucket/products/19/original/opt_rcc_thumbnail.jpg?1459863435">
    </p.

在Bootstrap卡组件上渲染图像

0 个答案: