176

I'm looking for the right url to reference static assets, like images within Vue javascript.

For example, I'm creating a leaflet marker using a custom icon image, and I've tried several urls, but they all return a 404 (Not Found):

Main.vue:

var icon = L.icon({
    iconUrl: './assets/img.png',
    iconSize:     [25, 25],
    iconAnchor:   [12, 12]
});

I've tried putting the images in the assets folder and the static folder with no luck. Do I have to tell vue to load those images somehow?

1
  • webpack? That usually wants to know if an image is included so it gets put in the bundle. OTher bundling systems probably don't care, as long as the image gets deployed to your server Nov 15, 2017 at 17:02

14 Answers 14

270

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

Example:

<img src="@/assets/images/home.png"/>
11
  • 2
    ... given you have a folder src/assets/images. Out of the box, vue-loader copies assets from src/../... to build/../.. OR inlines smaller pictures as data.image/png.. automatically.
    – user783388
    May 30, 2018 at 14:29
  • 22
    did not work for me: This dependency was not found:* @/assets/more-ico.svg. To install it, you can run: npm install --save @/assets/more-ico.svg... Sep 27, 2018 at 19:40
  • 3
    Did not work for me either, but..... i saw then that i used the wrong filename ;p works perfectly!
    – Larzan
    Oct 15, 2018 at 13:53
  • 10
    It works, but on template, if you want to use in css background-img property, try something like ../../assets/bg/login.svg, with the image into the assets folder Dec 19, 2018 at 21:49
  • 9
    Thank you. The vue documentation on static assets is needlessly verbose and buries this primary usecase nearly at the bottom of the page, in a tiny bullet point. Aug 30, 2019 at 14:40
115

In a Vue regular setup, /assets is not served.

The images become src="data:image/png;base64,iVBORw0K...YII=" strings, instead.


Using from within JavaScript: require()

To get the images from JS code, use require('../assets.myImage.png'). The path must be relative (see below).

So your code would be:

var icon = L.icon({
    iconUrl: require('./assets/img.png'),   // was iconUrl: './assets/img.png',
//  iconUrl: require('@/assets/img.png'), // use @ as alternative, depending on the path
    // ...
});

Use relative path

For example, say you have the following folder structure:

- src
  +- assets
     - myImage.png
  +- components
     - MyComponent.vue

If you want to reference the image in MyComponent.vue, the path sould be ../assets/myImage.png


Here's a DEMO CODESANDBOX showing it in action.

2
  • 2
    After scaffolding my app with vue-cli, this technique worked for me. The code sandbox was very helpful. The answer isn't as clear as the code sandbox.
    – revdrjrr
    Jun 11, 2019 at 12:00
  • require('./assets/img.png') didn't work for me in my component's options, I had to replace the . with a @: require('@/assets/img.png').
    – Hans
    Dec 22, 2019 at 12:05
44

A better solution would be

Adding some good practices and safity to @acdcjunior's answer, to use @ instead of ./

In JavaScript

require("@/assets/images/user-img-placeholder.png")

In JSX Template

<img src="@/assets/images/user-img-placeholder.png"/>

using @ points to the src directory.

using ~ points to the project root, which makes it easier to access the node_modules and other root level resources

2
  • What if its not an image but rather a text file or csv? And just want to get the path/url ?
    – trainoasis
    May 18, 2020 at 12:40
  • @trainoasis, you can use <a href="..."> for files of other type.
    – MYriad
    Apr 19, 2023 at 11:24
26

In order for Webpack to return the correct asset paths, you need to use require('./relative/path/to/file.jpg'), which will get processed by file-loader and returns the resolved URL.

computed: {
  iconUrl () {
    return require('./assets/img.png')
    // The path could be '../assets/img.png', etc., which depends on where your vue file is
  }
}

See VueJS templates - Handling Static Assets

0
18

Right after oppening script tag just add import someImage from '../assets/someImage.png' and use it for an icon url iconUrl: someImage

2
  • 2
    This worked well for me when incorporating the '@' in the import.
    – vab2048
    Mar 3, 2020 at 11:43
  • What about dynamic images? Jun 22, 2021 at 6:46
17

this finally worked for me, image passed as prop:

<img :src="require(`../../assets/${image}.svg`)">
2
  • 6
    Or using "@": <img :src="require(`@/assets/${image}.svg`)"> Feb 16, 2021 at 18:23
  • In my case i used require(../assets/country-flags-main/...svg) Jun 22, 2021 at 6:47
2

What system are you using? Webpack? Vue-loader?

I'll only brainstorming here...

Because .png is not a JavaScript file, you will need to configure Webpack to use file-loader or url-loader to handle them. The project scaffolded with vue-cli has also configured this for you.

You can take a look at webpack.conf.js in order to see if it's well configured like

...
    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
...

/assets is for files that are handles by webpack during bundling - for that, they have to be referenced somewhere in your javascript code.

Other assets can be put in /static, the content of this folder will be copied to /dist later as-is.

I recommend you to try to change:

iconUrl: './assets/img.png'

to

iconUrl: './dist/img.png'

You can read the official documentation here: https://vue-loader.vuejs.org/en/configurations/asset-url.html

Hope it helps to you!

1
  • I'm not sure what system I'm using, or if I have to add it manually. I tried the ./dist url and no luck
    – JBaczuk
    Nov 15, 2017 at 18:15
1

It works for me by using require syntax like this:

$('.eventSlick').slick({
    dots: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: false,
    autoplaySpeed: 2000,
    arrows: true,
    draggable: false,
    prevArrow: '<button type="button" data-role="none" class="slick-prev"><img src="' + require("@/assets/img/icon/Arrow_Left.svg")+'"></button>',
1

You could define the assets path depending on your environment

const dev = process.env.NODE_ENV != 'production';
const url = 'https://your-site.com';
const assets = dev ? '' : url;
<template>
    <img :src="`${assets}/logo.png`"/>
    <p>path: {{assets}}</p>
</template>
<script>
    export default {
        data: () => ({
            assets
        })
    }
</script>

Ideally this would be inside an utils js file, or as an extended app defineProperty, like:

const app = createApp(component);
app.config.globalProperties.$assets = assets;
app.mount(element);

and will be available as:

<template>
    <img :src="`${$assets}/logo.png`"/>
    <p>path: {{$assets}}</p>
</template>
<script>
    export default {
        mounted() {
            console.log(this.$assets);
        }
    }
</script>
1

For anyone coming here looking for a more modern JS answer, you need to import the image for the bundler (either Vite or Webpack) to pick it up. The following solution works when running in both dev and production modes:

import iconUrl from '@/assets/img.png';

const icon = L.icon({
    iconUrl:      iconUrl,
    iconSize:     [25, 25],
    iconAnchor:   [12, 12]
});
0

Having a default structure of folders generated by Vue CLI such as src/assets you can place your image there and refer this from HTML as follows <img src="../src/assets/img/logo.png"> as well (works automatically without any changes on deployment too).

0

I'm using typescript with vue, but this is how I went about it

<template><div><img :src="MyImage" /></div></template>
<script lang="ts">
    import { Vue } from 'vue-property-decorator';
    export default class MyPage extends Vue {
            MyImage = "../assets/images/myImage.png";
        }
</script>
0

load them in created, mounted or where you need them

async created() {
   try {
      this.icon = (await import('@assets/images/img.png')).default;
   } catch (e) {
      // explicitly ignored
   }

and then

<img :src=icon />
0

Inside code you can directly require image using.

const src = require("../../assets/images/xyz.png");

Or

In order to dynamically load image need this.

const image = new window.Image();
image.src = require("../../assets/images/xyz.png");
image.onload = () => {
// do something if needed
 };

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.