Images, Fonts and Files

With Webpack, using static assets like images and fonts works similarly to CSS.

You can import or require a file right in a JavaScript module or Vue component. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the src attribute of an image or the href of a link to a PDF.

To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to #1153.

In a Vue component, we convert any encountered asset URLs into webpack module requests.

For example, the following template snippet:

<img src="../image.png">

will be compiled into:

createElement('img', {
  attrs: {
    src: require('../image.png') // this is now a module request
  }
})

Since markdown pages are also compiled to Vue components, asset URLs will also be handled properly:

![img](../image.png)

Note that we only convert relative URLs, like image.png, ../image.png but not /image.png or https://example.com/image.png.