Edited at

Vue.jsでimgのsrcにマスタッシュ記法で画像URLを設定すると404エラーが発生するのでv-attrを使う

More than 1 year has passed since last update.

この記事はVue.js 0.12.10の情報です。最新のバージョンとは内容が違うため、ご注意下さい。

<img src="">にマスタッシュ記法{{}}で画像URLを設定すると、HTML DOMを表示する初回に404エラーが発生する。対処として公式ドキュメントにあるとおり、v-attrを使えば良い。

http://jp.vuejs.org/api/directives.html#v-attr

v-attrに設定するとき、マスタッシュ記法は使えないので、複数のプロパティを組み合わすことが出来ない(?)ため、複数のプロパティを扱いたい場合はmathodsに関数を定義してを使うと良さそう。


index.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js - テスト</title>
</head>
<body>
<script language="javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.10/vue.min.js"></script>
<div id="app">
<!-- 404エラーが発生する例 -->
<img v-repeat="image" src="{{src}}_{{src}}.png"></img>

<!-- 発生しない例 -->
<img v-repeat="image" v-attr="src:myTest(src)"></img>

<!-- プロパティそのものを使って、組み合わせを行わない場合は関数を呼ばずとも良い -->
<img v-repeat="image" v-attr="src:src"></img>
</div>

<script language="javascript">
var app = new Vue({
el: '#app',
data: {
image: [{src:"test1"},{src:"test2"}]
},
methods:{
myTest : function(src) {
return src + "_" + src + ".png";
}
}
})
</script>
</body>
</html>