web-dev-qa-db-fra.com

Image statique src dans le modèle Vue.js

Mon composant Vue contient des images. Je veux faire un chargement paresseux plus tard, donc je dois d'abord régler le src des images sur une petite image.

<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>

Me donne un tas d'erreurs, comme:

[Vue warn]: Expression invalide. Fonction générée body: /scope.static/scope.img/scope.clear.gif vue.common.js: 1014 [Vue

[Vue warn]: Erreur lors de l'évaluation de l'expression "/static/img/clear.gif": TypeError: Impossible de lire la propriété 'appel' de non défini (trouvé dans le composant :)

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

javascriptwebpackvue.js
21
reggie

Si vous souhaitez lier une chaîne à l'attribut src, vous devez l'envelopper entre guillemets simples:

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

OMI vous n'avez pas besoin de lier une chaîne, vous pouvez utiliser le moyen simple:

<img src="/static/img/clear.gif">

Consultez un exemple concernant le préchargement d’image ici: http://codepen.io/pespantelis/pen/RWVZxL

28
Pantelis Peslis

Cette solution est destinée aux utilisateurs de Vue-2:

  1. Dans vue-2 si vous n'aimez pas conserver vos fichiers dans le dossier static ( informations pertinentes ) ou
  2. Dans vue-2 & vue-cli-3 si vous n'aimez pas conserver vos fichiers dans le dossier public (le dossier static est renommé en public):

La solution simple est :)

<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'}}

Si vous souhaitez conserver vos images statiques dans le dossier static/assets/img ou public/assets/img, faites simplement:

<img src="./assets/img/clear.gif" />
9
Syed

La réponse de @Pantelis m'a en quelque sorte conduit à une solution à un tel malentendu. Un projet de tableau d'affichage sur lequel je travaille doit afficher une image facultative. J'avais des crises en essayant d'obtenir le src = imagefile concaténer un chemin fixe et une chaîne de nom de fichier variable jusqu'à ce que je voie l'utilisation bizarre de guillemets "''" :-)

<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>
8
rickatech

Voici comment je le résous .:

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

Et sur la partie modèle:

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

Voir en action ici

3
roli roli

déclarer une nouvelle variable indiquant que la valeur contient le chemin de l'image 

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

puis appelez la variable

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

lier cela sur html, voici l'exemple: 

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

j'espère que ça va aider

0
Cevin Ways