web-dev-qa-db-ja.com

Vue.jsテンプレートの静的画像src

My Vueコンポーネントにはいくつかの画像が含まれています。後で遅延読み込みを行いたいので、最初に画像のsrcを小さな画像に設定する必要があります。

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

次のような大量のエラーが表示されます。

[Vue warn]：無効な式。生成された関数本体：/scope.static/scope.img/scope.clear.gif vue.common.js：1014 [Vue

[Vue警告]：式 "/static/img/clear.gif"の評価中にエラーが発生しました：TypeError：未定義のプロパティ 'call'を読み取ることができません（コンポーネントにあります：）

webpack.config.js：module.exports = {// ... build：{assetPublicPath： '/'、assetSubDirectory： 'static'}}

javascriptwebpackvue.js
27
reggie

文字列をsrc属性にバインドする場合は、一重引用符で囲む必要があります。

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

IMOでは、文字列をバインドする必要はありません。簡単な方法を使用できます。

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

画像のプリロードに関する例をこちらで確認してください： http://codepen.io/pespantelis/pen/RWVZxL

32
Pantelis Peslis

このソリューションはVue-2ユーザー向けです。

  1. vue-2で、ファイルをstaticフォルダーに保存したくない場合（ 関連情報 ）、または
  2. vue-2およびvue-cli-3で、ファイルをpublicフォルダーに保存したくない場合（staticフォルダーの名前はpublicに変更されます）：

簡単な解決策は:)

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

static/assets/imgまたはpublic/assets/imgフォルダーに静的イメージを保持する場合は、次のようにします。

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

@Pantelisの答えは、どういうわけか私を同様の誤解の解決策に導きました。私が取り組んでいる掲示板プロジェクトでは、オプションの画像を表示する必要があります。 「 ''」引用符の風変わりな使用が見られるまで、固定パスと可変ファイル名文字列を連結するためにsrc = imagefileを取得しようとしていました。

<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

これは私がそれを解決する方法です：

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

そして、テンプレート部分で：

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

実際の動作をご覧ください

7
roli roli

値が画像のパスを含む新しい変数を宣言します

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

その後、変数を呼び出します

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

これをhtmlにバインドし、この例：

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

それが役立つことを願って

1
Cevin Ways