Vue.jsの"Vue-lazyload"をつかって画像を表示したい

Question

以下のようにコードを書いて、配列内にある画像があるpathに、 v-lazy="require(path)"で表示したいです

<template>
  <div id="imglist">
    {{ items }}
    <ul>
      <li v-for="item in items">
        {{ item }}
        <img v-lazy="loadImg(item)">
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'ImgList',
  data() {
    items: [
        '/public/images/logo.png',
        '/public/images/logo2.png'
    ]
  },
  methods: {
      loadImg: function (path) {
        require(path)
      }
  }
}
</script>

エラー内容は、 vue-cliを使用して、npm run devで起動していて以下のようにエラーが表示されます。

warning  in ./src/components/ImgList.vue

Critical dependency: the request of a dependency is an expression

Answer 1

requireはバンドル中に解決されていなければなりません。
プログラム実行時にはロードされるべきリソースはそこに埋め込まれた状態でなければ動作しないということです。

対して、関数の引数はプログラムの実行時にしか値が確定しません。
バンドル時に値が確定していないのでエラーになるのです。

動的にリソースをロードしたいなら、javascript 動的ロードとか動的requireとかで調べてみてください。
やり方を解説した記事がたくさんあります。