Question

我开发了一个用vue-cli

创建的项目

基本样本有效：

<img src=“./assets/panorama1.jpg”>

但是当我将它与a-frame一起使用时，它不起作用：

<a-sky src=“./assets/panorama1.jpg”></a-sky>

无法找到图像。

以下是webpack设置：

alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
}

我必须使用

require('./assets/panorama1.jpg') 
// or
require('@/assets/panorama1.jpg')

或

import panoramaImage from './assets/panorama1.jpg'
// or
import panoramaImage from '@/assets/panorama1.jpg'

然后在Vue的数据中设置它以便它可以工作。

有什么问题？

Answer 1

您可以从计算方法中获取图像，该方法为您提供来自require的图像：

<template>
  <img :id="panoramaId" :src="panoramaImage" />
</template>

<script>

export default {
  name: 'PanoramaAsset',
  props: ['panorama'],
  computed: {
    panoramaId () {
      return `panorama${this.panorama.id}`
    },
    panoramaImage () {
      return require(`@/assets/panoramas/panorama-${this.panorama.id}.jpg`)
    }
  }
}
</script>

vue cli image src with aframe不起作用

1 个答案: