I’m not getting to bind with image

Asked

Viewed 181 times

1

Someone could explain to me why I’m not able to render the image on the screen. I’m using the Vue-cli and the image is in the folder Assets inside the briefcase src normal, but when I call her in the template does not load. I have tried so: ./assets/produto.png, thus: ../assets/produto.png, thus: src/assets/produto.png. But to no avail!

Template:

<div>
  <img :src="imagem" :alt="alt">
</div>

Script:

data () {
  return {
    imagem: './assets/produto.png',
    alt: 'Imagens dos produtos.'
  }
}
vue.js-2

  • Any errors in Chrome tools?

  • @Hiagosouza No guy at all.

  • When inspecting element which content displayed in the img tag?

  • You can post the complete code with your controller?

  • @Hiagosouza Cara I managed to solve here, Vue-cli creates a folder Assets and plays the images inside it, only tbm creates another folder called Static at the same level as Assets and the images have to be inserted in this Static folder.

  • 1

    Topp! That’s right, put the solution as a response to the community. Hug.

  • Tried so? imagem: '~assets/produto.png'

  • @Marconi so tbm was not man. With me it just worked taking the images from the folder Assets and putting in the same Static folder.

Show 3 more comments

1 answer

0

Personal for those who have the same problem just put the images inside the folder static which is created by Vue-cli at the same folder level Assets.

Template:

<div>
  <img :src="imagem" :alt="alt">
</div>

Script:

data () {
  return {
    imagem: './static/produto.png',
    alt: 'Imagens dos produtos.'
  }
}

Browser other questions tagged vue.js-2

You are not signed in. Login or sign up in order to post.