Static image src in Vue.js template

Question

My Vue component contains some images. I want to do lazy-loading later, so I need to set the src of the images to a small image, first.

<template>
        <div v-for="item in portfolioItems">
            <a href="#{{ item.id }}">
                <img
                    data-original="{{ item.img }}"
                    v-bind:src="/static/img/clear.gif"
                    class="lazy" alt="">
            </a>
        </div>
</template>

Gives me a bunch of errors, like:

[Vue warn]: Invalid expression. Generated function body: /scope.static/scope.img/scope.clear.gif vue.common.js:1014[Vue

[Vue warn]: Error when evaluating expression "/static/img/clear.gif": TypeError: Cannot read property 'call' of undefined (found in component: )

webpack.config.js:
module.exports = {
    // ...
    build: {
        assetsPublicPath: '/',
        assetsSubDirectory: 'static'
    }
}

Syed · Accepted Answer · 2020-07-08 12:38:15Z

79

This solution is for Vue-2 users:

In vue-2 if you don't like to keep your files in static folder (relevant info), or
In vue-2 & vue-cli-3 if you don't like to keep your files in public folder (static folder is renamed to public):

The simple solution is :)

<img src="@/assets/img/clear.gif" /> // just do this:
<img :src="require(`@/assets/img/clear.gif`)" // or do this:
<img :src="require(`@/assets/img/${imgURL}`)" // if pulling from: data() {return {imgURL: 'clear.gif'}}

If you like to keep your static images in static/assets/img or public/assets/img folder, then just do:

<img src="./assets/img/clear.gif" />
<img src="/assets/img/clear.gif" /> // in some case without dot ./

edited Jul 8, 2020 at 12:38

answered Jun 28, 2018 at 13:52

Syed

16.6k15 gold badges128 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dan Oswalt Over a year ago

using vue-cli-3, this answer finally did it for me loading in a path string dynamically.

Vince Banzon Over a year ago

<img :src="require(@/assets/img/clear.gif)"> worked for me. My file structure is in /assets/img/clear.gif. Thank you for a lot of options to choose from. Finally, one worked for me.

Syed Over a year ago

@VinceBanzon glad that helped you, don't forget to up vote ;)

Rodrigo Over a year ago

This still works with VueCLI 4.4. Thanks kind sir, you just got upvoted!! ;)

LUISAO Over a year ago

I put '@' inside of the variable. Your solution you put '@' inside the tag and the variable you put only the name of file, not path. it was great! Thank you!

pespantelis · Accepted Answer · 2016-06-05 18:25:25Z

51

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

answered Jun 5, 2016 at 18:25

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

1 Comment

ShadowGames Over a year ago

Your example is broken and I'm not sure if <img src="/static/img/clear.gif"> actually works as other answers clearly point out to use require('@/assets/...') for the :src prop.

Roland · Accepted Answer · 2018-07-28 05:20:41Z

22

This is how i solve it.:

      items: [
        { title: 'Dashboard', icon: require('@/assets/icons/sidebar/dashboard.svg') },
        { title: 'Projects',  icon: require('@/assets/icons/sidebar/projects.svg') },
        { title: 'Clients', icon: require('@/assets/icons/sidebar/clients.svg') },
      ],

And on the template part:

<img :src="item.icon" />

See it in action here

edited Jul 28, 2018 at 5:20

answered Jul 14, 2018 at 19:25

Roland

28.1k9 gold badges108 silver badges103 bronze badges

2 Comments

Roland Over a year ago

It is working.I added a sandbox example in my answer.Take a look to it.

Nitin Nanda Over a year ago

amazing. after searching for 1 hour. Can you please also suggest why do we need @require in this specific case

rickatech · Accepted Answer · 2016-12-01 19:29:02Z

@Pantelis answer somehow steered me to a solution for a similar misunderstanding. A message board project I'm working on needs to show an optional image. I was having fits trying to get the src=imagefile to concatenate a fixed path and variable filename string until I saw the quirky use of "''" quotes :-)

<template id="symp-tmpl">
  <div>
    <div v-for="item in items" style="clear: both;">
      <div v-if="(item.imagefile !== '[none]')">
        <img v-bind:src="'/storage/userimages/' + item.imagefile">
      </div>
      sub: <span>@{{ item.subject }}</span>
      <span v-if="(login == item.author)">[edit]</span>
      <br>@{{ item.author }}
      <br>msg: <span>@{{ item.message }}</span>
    </div>
  </div>
</template>

Zoe - Save the data dump · Accepted Answer · 2019-02-09 15:03:40Z

7

declare new variable that the value contain the path of image

const imgLink = require('../../assets/your-image.png')

then call the variable

export default {
    name: 'onepage',
    data(){
        return{
            img: imgLink,
        }
    }
}

bind that on html, this the example:

<a href="#"><img v-bind:src="img" alt="" class="logo"></a>

hope it will help

edited Feb 9, 2019 at 15:03

Zoe - Save the data dump

28.4k22 gold badges130 silver badges163 bronze badges

answered Feb 9, 2019 at 15:02

Cevin Ways

99411 silver badges13 bronze badges

Comments

Lamri Djamal · Accepted Answer · 2020-11-28 09:38:56Z

2

You need use just simple code <img alt="img" src="../assets/index.png" />

Do not forgot atribut alt in balise img

answered Nov 28, 2020 at 9:38

Lamri Djamal

2992 silver badges10 bronze badges

Comments

Julian Baltuttis · Accepted Answer · 2021-12-16 21:33:40Z

I had a similar issue with Vue where I tried to display several images by importing data from a configuration json file and then iterating over the data using v-for.

Even when I put require('../../assets/' + filename) right in the json, the images would never show. I eventually realized that Vue was interpreting my data value as a string, rather than a function. Good thing that javascript supports functions as a return type. So I made this function:

  getImagePath(filename: string) {
    return require('../../assets/' + filename);
  }

I then just called that function from my v-for loop simply passing in the filenames from my config:

<v-list-item :key="place.id" v-for="place in placesOfPower">
  <v-list-item-content class="justify-end">
    <v-img :src="getImagePath(place.image)"
           position="top center"
           height="90"
           width="30vw"/>
  </v-list-item-content>
<v-list-item-content>

sebix · Accepted Answer · 2021-04-01 14:57:25Z

I found this thread on my search for a solution to show an image when it exists. I want to show a list of database entries that contain a type property. Each type should have a fitting png file in my vue assets folder. The whole list would break if a new type would be added without adding the image beforehand.

I found "Catch an error on requiring module in node.js" on stack overflow. The answer by Peter Lyons led me to my solution:

<template>
  <v-data-table :items="items">
    <template v-slot:item.type="{ item }">
      <v-img
        v-if="typeImageSource(item.type)"
        :src="typeImageSource(item.type)"
      />
      <template v-else>
        {{ item.type }}
      </template>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data () {
    return {
      // In reality this gets filled from a db:
      items: [
        { id: 1, type: 'abc' },
        { id: 2, type: 'abcd' },
        { id: 3, type: 'efg' },
      ]
    }
  },
  methods: {
    typeImageSource: function (type) {
      let src = ''
      try {
        src = require(`@/assets/types/${('' + type).toLowerCase()}.png`)
      } catch (error) {
        console.warn(`Image for type ${type} could not be found! Please add "${('' + type).toLowerCase()}.png" to the folder "@/assets/types/".\n\n`, error)
        return null
      }
      return src
    },
  },
}
</script>

fafa.mnzm · Accepted Answer · 2021-06-22 11:09:26Z

0

If you are using nuxt use <img :src="'_nuxt/path_to_your_local_image'" />

if you are using vue first use static src import : <img src="path_to_your_local_image" />

then inspect image element to see what src is rendered to the browser then replace it with a dynamic src

answered Jun 22, 2021 at 11:09

fafa.mnzm

6119 silver badges18 bronze badges

Collectives™ on Stack Overflow

Static image src in Vue.js template

9 Answers 9

5 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

5 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related