Imagen estática src en la plantilla Vue.js

Solución:

Esta solución es para usuarios de Vue-2:

1. En vue-2 si no le gusta mantener sus archivos en static carpeta (información relevante), o
2. En vue-2 Y vue-cli-3 si no le gusta mantener sus archivos en public carpetastatic se cambia el nombre de la carpeta a public):

La solución simple es 🙂

<img src="https://foroayuda.es/@/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'}}

Si desea mantener sus imágenes estáticas en static/assets/img o public/assets/img carpeta, luego haz lo siguiente:

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

Si desea unir una cuerda al src atributo, debe envolverlo entre comillas simples:

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

En mi opinión, no necesita unir una cadena, puede usar la forma simple:

<img src="https://foroayuda.es/static/img/clear.gif">

Vea un ejemplo sobre la precarga de la imagen aquí: http://codepen.io/pespantelis/pen/RWVZxL

Así es como lo resuelvo:

      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') },
      ],

Y en la parte de la plantilla:

<img :src="https://foroayuda.es/item.icon" />

Véalo en acción aquí

---

---

Utiliza Nuestro Buscador