Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
37 lines (25 sloc) 1.42 KB
title layout
Images, Fonts and Files
docs

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.

You can’t perform that action at this time.