How can I configure Vue 2 using Vue CLI to access and utilize images stored in the src/static directory?

Question

How can I configure Vue 2 using Vue CLI to access and utilize images stored in the src/static directory?

I'm in the process of bundling my Vue CLI application to include src/static/xyz.png so that I can easily reference it as /static/xyz.png.

Unfortunately, the documentation provided by Vue doesn't offer clear instructions on how to achieve this. It seems like I need to make changes to a vue.config.js file, but I'm feeling lost between the information available here:

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

and here:

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

I have attempted various webpack configurations, but my understanding of webpack is not strong enough to solve this problem. Any suggestions or guidance would be greatly appreciated. Thank you!

javascript vue.js webpack vuejs2

Answer 1

Answer №1

When working with Vue CLI projects, all files located in the public/ directory are automatically bundled as static assets. This means there is no need for a custom configuration to include them. For example, if you want to store an image, it should be placed in the following path:

<projectRoot>/public/static/xyz.png

Subsequently, you can reference these images in your HTML like so:

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

Keep in mind that these static assets bypass Webpack processing, which means they will not undergo optimization (resulting in potentially larger file sizes).

Answer 2

When working with Vue CLI projects, all files located in the public/ directory are automatically bundled as static assets. This means there is no need for a custom configuration to include them. For example, if you want to store an image, it should be placed in the following path:

<projectRoot>/public/static/xyz.png

Subsequently, you can reference these images in your HTML like so:

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

Keep in mind that these static assets bypass Webpack processing, which means they will not undergo optimization (resulting in potentially larger file sizes).

How can I configure Vue 2 using Vue CLI to access and utilize images stored in the src/static directory?

Answer №1

Similar questions

What is the best way to transform a JSON array in text format into a JSON object array using NodeJS or JavaScript?

Ways to automatically refresh a page in Javascript after a short period of user inactivity

Dealing with errors when implementing an Angular 2 route guard that returns an Observable of type boolean can be a

Issues with Laravel 6 user authentication functionality

Adjusting the height of a Jquery Fancybox to allow for scrolling down

The struggle between Node.js 404 errors and Angular's URL refresh issue

Steps to simulate a TouchEvent programmatically using TypeScript

Use JavaScript to dynamically add CSS styles to elements before and after a button wrapper

Guide on transferring control from a successful jQuery event to an HTML form

Facing issues with Heroku and Express/Nodejs crashing?

Maintain fullcalendar event filtering across multiple renderings

Adding additional `select` dynamically causes the value to disappear from view

Javascript is not functioning properly when making an ajax call

Avoid HTML code injection in an ExtJS4 grid by properly escaping the href attribute

Having trouble with material-ui installation in React, Redux, and React-Router project

Transform an SVG string into an image source

Guide to making a sliding animation appear when hovering over a menu using jQuery

Using Vue.js to set a mobile browser's viewport height to 100%

Updating an API parameter in React's setState doesn't reflect the new changes

Taking out the z-index from the transition code