Search code examples
vue.jsmarkdowngridsome

How Gridsome handles External Image Url

Can anybody please explain how does Gridsome handles External Image Url in a Markdown File. Does it downloads the image or Simmply renders an External Image using that URL.

Solution

  • g-image - relative images

    Gridsome has a built-in component that outputs an optimized progressive image. It also resizes and crops in real-time when developing.

    📣 Only local, relative image paths will be compressed by Gridsome.

    Related to md:

    The @gridsome/transformer-remark transformer plugin automatically converts normal Markdown images to g-image compatible markup.

    Read more: https://gridsome.org/docs/images/

    -VS-

    External URL - no render engine

    = External Image using that URL 

    
---
title: post-1
---


<h2 class="uk-heading-line"><span>Landing Page</span></h2>

<img src ="https://images.unsplash.com/photo-1416138645715-930585fe4ce2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" title="turtle">

![Landing Page](https://images.unsplash.com/photo-1416138645715-930585fe4ce2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60)