How to Reference Static Assets Within Vue JavaScript

How to reference static assets within vue javascript

For anyone looking to refer images from template, You can refer images directly using '@'

Example:

<img src="@/assets/images/home.png"/>

Referencing static assets in VueJS Components

I'm only brainstorming here... I think it has to do with the Hot Module Reloading not being perfect. If you had it as "./assets/loading.gif" then that would match test: /\.(png|jpg|gif|svg)$/, and that should produce a base64 encoded image that gets embedded in the script that it bundles (and not placed in the dist folder). Now perhaps what happened when you changed it to "./dist/loading.gif", is that it still searched for loading.gif in the script which in the dev environment might still be available since you initially ran the dev server with "./assets/loading.gif". I'm no expert, but I think the img-loader in your webpack config is taking your "./dist/loading.gif" and intelligently finding the image in one of the webpack chunks that was initially built. If you were to start the dev server with "./dist/loading.gif", my guess is it would not work as you initially expected it too.

What's the proper location to store images in VueJS - public folder or assets folder?

Based on the official vue documentation everything that is within the assets folder will be handled by Webpack while everything in the public folder is simply copied but doesn't go through Webpack: https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

So if you want to take advantage of Webpacks optimization features during build (which you most certainly want) put them in assets.
I also put all my img's in the assets folder and only have the pwa related images and icons within the public folder.

Static image src in Vue.js template

If you want to bind a string to the src attribute, you should wrap it on single quotes:

<img v-bind:src="'/static/img/clear.gif'">
<!-- or shorthand -->
<img :src="'/static/img/clear.gif'">

IMO you do not need to bind a string, you could use the simple way:

<img src="/static/img/clear.gif">

Check an example about the image preload here: http://codepen.io/pespantelis/pen/RWVZxL

Src binding in vue is not showing images

Solution 1:
If you don't want to use Webpack assets from the assets directory, you can add the images to the static directory.

In your code, you can then reference these files relative to the root (/):

<!-- Static image from static directory -->
<img src="/my-image.png" />

<!-- webpacked image from assets directory -->
<img src="~/assets/my-image-2.png" />

Nuxt doesn't change this path, so if you customize your router.base then you'll need to make sure to add that manually to your paths. For example:

<img :src="`${yourPrefix}/my-image.png`" />

Solution 2: When working with dynamic images you will need to use require

 <img :src="require(`~/assets/img/${image}.jpg`)" />

Image not displaying in loop Vue.js

---

Related Topics