CODEWITHSUNDEEP
javascriptvue.jswebpackvuejs2
mikeb
mikeb

Reputation: 11267

Vue 2 with Vue CLI - How to make src/static static so I can use images that are in there?

I'm trying to package my Vue CLI app to package src/static/xyz.png such that I can reference it as /static/xyz.png.

The Vue docs don't really show how to do this. I need a vue.config.js but between here:

https://cli.vuejs.org/guide/webpack.html

and here:

https://cli.vuejs.org/guide/html-and-static-assets.html#html

I can't figure out what I need to do. Any ideas? I've tried lots of webpack stuff but don't know webpack well enough, evidently...

Upvotes: 0

Views: 716

Answers (1)

tony19
tony19

Reputation: 138226

In Vue CLI projects, files under public/ are automatically bundled as static assets, so you don't need a custom config for this. Your image should be stored in:

<projectRoot>/public/static/xyz.png

Then you'd reference them in your markup like this:

<img src="/static/xyz.png">

Note that these static assets are not run through Webpack, so they won't be optimized (i.e., the image file size might be unnecessarily large).

Upvotes: 2

Related Questions