在Vue.js数据属性中使用导入/请求具有动态值

Question

我正在尝试将随机图像（image-01.jpg，image-02.jpg，... image-05.jpg）添加到我正在使用的import / require请求中Vue.js中的data选项，代码如下：

<script>
  const randomImage = `image-0${(Math.floor(Math.random() * 5) + 1)}.jpg`

  export default {
    data () {
      return {
        image: import('@/some/module/in/some/folder/\'' + randomImage + '\'')
      }
    }
  }
</script>

但是我得到的错误输出是：

Error: Cannot find module './'image-03.jpg'' at eval (eval at ./some/module/in/some/folder lazy recursive ^\.\/'.*'$

有没有办法做到这一点？

非常感谢。

---

P.s。我也尝试了以下方法：

<script>
  const randomImage = `@/some/module/in/some/folder/winter-0${(Math.floor(Math.random() * 5) + 1)}.jpg`

  export default {
    data () {
      return {
        image: import(`${randomImage}`)
      }
    }
  }
</script>

但是出现类似错误。

---

P.p.s。我还应该补充一点，我尝试使用require而不是import。

Answer 1

如果您正在模板中访问图像，则可以将其用作平面字符串。

模板：

<img :src="imageUrl" v-bind:alt="pic">

脚本：

new Vue({
  el: '#app',
  data: {
    imageUrl: 'https://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg'
  }
})

样本小提琴https://jsfiddle.net/r4vysx6e/。

Answer 2

要对此进行更新（我不确定这是否是正确的方法。..下面的代码示例现在可以使用。

<template>
  <img
    alt="Random image"
    :src="image"
  />
</template>

<script>
  const randomImage = `image-0${(Math.floor(Math.random() * 5) + 1)}`

  export default {
    data () {
      return {
        image: null
      }
    },

    mounted () {
      import('@/some/module/folder/' + randomImage + '.jpg').then((image) => {
        if (image.default) {
          this.image = image.default
        }
      })
    }
  }
</script>

如果有人有更好的解决方案，请告诉我。