Images, Fonts and Files

Using `import` or `require`

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.

Using the front matter `assets`

In pages, you can use the front matter assets to import static assets.

---
assets:
  cover: ./cover.png
---

You can use any relative path here, like ./cover.png, ../images/photo.jpg. @ (alias to project root) is also supported, for example: @/images/cover.png.

Then use them in your layout component:

<template>
  <div>
    <!-- page.assets.cover will be an absolute url -->
    <img :src="page.assets.cover" alt="cover">
  </div>
</template>

<script>
export default {
  props: ['page']
}
</script>

The files referenced here will be processed by webpack.

← Using PostCSS Using the Static Folder →

Edit This Page on GitHub

# Using import or require

# Using the front matter assets

Using `import` or `require`

Using the front matter `assets`