githubnpmgifreadmenpm-package

How to show gif in npm package's readme file?


I have added below line in my Readme file and it works fine on GitHub but the gif is not showing on npm package page.

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

Solution

  • You need to replace the image link in your README with the 'raw' link (i.e. the link to the actual image).
    The link you used actually loads an HTML page with info of the GIF as a repository object on GitHub.
    This causes CORS errors on NPM.

    You have two options:

    1. Add raw=true to the end of the URL:
      https://github.com/bilalyaqoob/react-range-slider/blob/master/horizontal.gif?raw=true

    2. Use the direct raw URL:
      https://raw.githubusercontent.com/bilalyaqoob/react-range-slider/master/horizontal.gif

      Note: To find this link:

      • open the link from 1. in your browser; it redirects to 2.
      • right-click the image and select 'Copy image address'