如何在npm包的readme文件中显示gif？

Question

我在自述文件中添加了以下行，它在 GitHub 上运行良好，但 gif 未显示在 npm 包页面上。

![@bilal111996/react-range-slider horizontal](https://github.com/bilalyaqoob/react-range-slider/blob/master/horizontal.gif)

Answer 1

您需要将自述文件中的图像链接替换为“raw”链接（即实际图像的链接）。
您使用的链接实际上加载了一个 HTML 页面，其中包含 GIF 的信息作为 GitHub 上的存储库对象。
这会导致 NPM 上出现CORS 错误。

您有两个选择：

1. 将

   raw=true

   添加到 URL 末尾:
   https://github.com/bilalyaqoob/react-range-slider/blob/master/horizontal.gif?raw=true

2. 使用直接原始URL：
   https://raw.githubusercontent.com/bilalyaqoob/react-range-slider/master/horizontal.gif

   注意：要找到此链接：

   • 在浏览器中打开 1. 中的链接；它重定向到 2。
   • 右键单击图像并选择“复制图像地址”

Answer 2

就我而言，我忘记将存储库的可见性设置为公开。如果您的存储库是私有的，NPM 将无法从您的存储库中提取图像。