How to load images of a directories in vue

Question

I am starting to learn vue.js and the following problem has been presented to me, I am creating an SFC and when exporting the images inside the folder src / assets / logo.png I do not load the image, this is the code:

<template>
  <div id="app">
    <div class="row">
      <img :src="imagen" alt="" id="">
      <div class="col s12 m4">
        <your-list></your-list>
      </div>
    </div>
  </div>
</template>

<script>
import YourList from './components/YourList'

export default {
  name: 'app',
  components: {
    'your-list': YourList
  },
  data() {
    return{
      imagen: './assets/logo.png'
    }
    }
  }
</script>

<style lang="scss">
</style>

The solution I have found is to import the logo in the following way:

<template>
  <div id="app">
    <div class="row">
      <img :src="imagen" alt="" id="">
      <div class="col s12 m4">
        <your-list></your-list>
      </div>
    </div>
  </div>
</template>

<script>
import YourList from './components/YourList'

export default {
  name: 'app',
  components: {
    'your-list': YourList
  },
  data() {
    return{
      imagen: './assets/logo.png'
    }
    }
  }
</script>


<style lang="scss">
</style>

I added an import to bring the image and be able to show it, my doubt would be if I have to use 20 images I would have to do it that way, I do not know if it is the most optimal way. I'm using @ vue/cli

ittus · Accepted Answer · 2019-05-16 04:35:51Z

1

You can use require to make webpack resolve it correctly.

data() {
  return {
    imagen: require('./assets/logo.png')
  }
}

answered May 16, 2019 at 4:35

ittus

22.5k5 gold badges62 silver badges59 bronze badges

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

1 Comment

codev Over a year ago

Thank you very much, it worked perfectly, I'm starting with vue and this question had arisen

Collectives™ on Stack Overflow

How to load images of a directories in vue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related