画像のsrcパスを外部データからもってきたとき、エイリアスが展開されない

Question

画像のsrcパスを外部データからもってきたとき、エイリアスが展開されません。
たとえば下記ソースを実行したとき、
<img src="@/assets/images/image1.png" alt="">
と展開されてしまいます。
こちらの期待としては、assetsフォルダ内の画像パスを参照してほしいです。

dataのjsonデータ内でassetsフォルダを指定する場合はどうすればいいでしょう？

<template>
  <main class="container">
    <div v-for="item in contents">
      <h5>{{ item.name }}</h5>
      <img :src="item.image" alt="">
    </div>
 </main>
</template>

<script>
export default {
  data() {
    return {
      contents: [
        {
          name: "title1",
          image: "@/assets/images/image1.png"
        },
        {
          name: "title2",
          image: "@/assets/images/image2.png"
        }
      ]
    };
  }
};
</script>

Answer 1

自己解決しました。

<b-card-img-lazy :src="require('@/assets/images/' + item.image)" class="rounded-0"></b-card-img-lazy>

これだとうまくいかないですが、

<b-card-img-lazy :src="image_path(item.image)" class="rounded-0"></b-card-img-lazy>


  methods: {
    image_path: function(slug){
      return require('@/assets/images/' + slug);
    }
  }

というように、methodsをかますとうまくいきました。

Answer 2

@はimgタグで直接記述したときなどは展開されますが
data()から:srcで受け取っても@のままです。(仕様)

// 正しい
<img src="@/assets/images/image1.png">

// 間違い
// <img :src="image" alt="">
export default {
  data() {
    return {
      image: "@/assets/images/image1.png"
    };
  }
}

Comments

[takeshi.kikuchi]

なるほど仕様なんですね。。。

そうなると外部データからエイリアスを使った画像パス指定は難しいでしょうか。