Images in a table created by javascript libraries always shimmer or blink

[leessang01]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

Hello.
I wrote a post including html code to make a table with images. The table was created by javascript libraries like bootstrap-table, datatables, etc. However, The images in the table always shimmer (or blink) as if they still were loading. I have looked up several discussions or issues, but they say it's already been resolved.

I am not an expert CSS or Javascript, so please let me know what the problem is.
Please check the attached image and code using bootstrap-table. Thank you for your time.

---

• OS: Ubuntu 18.04.6 LTS
• Theme version: "jekyll-theme-chirpy", "~> 7.0", ">= 7.0.1"

---

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-table.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-table.min.js"></script>
<table id="table">
  <thead>
    <tr>
      <th data-field="img">ID</th>
      <th data-field="name">Name</th>
      <th data-field="price">Price</th>
    </tr>
  </thead>
</table>

<script>
  var $table = $('#table')

  $(function() {
    var data = [
      {
        'img': '<img src="https://chirpy-img.netlify.app/commons/avatar.jpg" alt="Chirpy" style="width: 50px;"/>',
        'name': 'Chirpy',
        'price': 'Free'
      }
    ]
    $table.bootstrapTable({data: data})
  })
</script>

Operations you have already tried

I've tested in my local environment before hosted on Github.
Bootstrap-table and datatables were tested, but I just attached code about bootstrap-table only.

Working

• Images does not shimmer in the default Jekyll theme
• Images does not shimmer when a table is made by hard coded as below

<table>
<thead>
  <tr>
    <th>Img</th>
    <th>Name</th>
    <th>Price</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><img src="https://chirpy-img.netlify.app/commons/avatar.jpg" alt="Chirpy" style="width: 50px;"/></td>
    <td>Chirpy</td>
    <td>Free</td>
  </tr>
</tbody>
</table>

Not Working

• Images shimmer in a site built from the latest 'jekyll chirpy-theme'
• Images shimmer in a site generated from the latest 'chirpy-starter'

Anything else?

You can test code using the online editor

• https://live.bootstrap-table.com/

[kungfux]

I'm not sure what you were trying to accomplish, but I would suggest using Markdown instead, which is the main reason for using Jekyll.

| ID                                                     | Name   | Price |
| :----------------------------------------------------- | :----- | ----: |
| ![](https://chirpy-img.netlify.app/commons/avatar.jpg) | Chirpy |  Free |

[leessang01]

Thank you for a comment. I tried to make a dynamic table using some libraries but an image shimmering happened.