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'}}
文字列を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
このソリューションはVue-2ユーザー向けです。
vue-2
で、ファイルをstatic
フォルダーに保存したくない場合( 関連情報 )、または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" />
@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>
これは私がそれを解決する方法です:
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" />
値が画像のパスを含む新しい変数を宣言します
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>
それが役立つことを願って