Question

我正在使用electronic.js + vue.js和json作为我的数据库来制作电影库。所有数据均已从数据库加载，但其中的图像路径不会加载。

我试图使用require（）加载图像的本地路径，但是它总是向我抛出渲染错误：错误：无法找到模块文件路径。

<v-card v-for="movie in movies" :key="movie.id" class="pa-5">
      <v-card-title primary-title>
        {{ movie.id }} - {{ movie.title }}
      </v-card-title>
      <v-card-text>
        {{ movie.year }}
      </v-card-text>
      <v-img :src="getImage(movie.poster)" />
</v-card>

import axios from 'axios'

export default {
  components: {},
  data() {
    return {
      movies: [],
    }
  },
  methods: {
    fetchData() {
      axios.get('db.json').then(res => {
        return this.movies = res.data.movies
      })
    },
    getImage(poster) {
      return poster ? require(`${poster}`) : ''
    }
  },
  async created() {
    this.fetchData()
  }
};

{
  "movies": [
    {
      "id": 0,
      "title": "Aladdin",
      "year": 2019,
      "poster": "../../../posters/aladdin_2019.jpg"
    },
    {
      "id": 1,
      "title": "Alita Battle Angel",
      "year": 2019,
      "poster": "../../../posters/alita.jpg"
    }
  ]
}

Answer 1

在require内的方法中，使用空字符串连接路径并获取字符串，require期望这样做：

getImage(poster) {
  return poster ? require("" + poster) : ''
}

如果您阅读了官方文档的require with expression，则可以找到有关的更多信息。

错误：找不到模块-无法在vue.js中加载图片的本地路径

1 个答案: