Arco design vue 中 <a-image> 组件不显示

Question

Arco design vue 中 组件不显示

<a-image
  width="200"
   src="../../assets/example-20.png"
/>

<a-image
  width="200"
   src="assets/example-20.png"
/>

<a-image
  width="200"
   src="src/assets/example-20.png"
/>

这样写都不行阿？ 如何解决？

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

Arco Design Vue中的组件是基于A-Frame库来渲染的，并且需要在AR/VR环境中进行显示。如果你在普通的Web页面中使用组件，它是不会显示的。

如果你想在AR/VR环境中显示这个组件，可以按照以下步骤进行：

1. 确保你已经安装了ARCO Design和A-Frame库：

npm install arco-design
npm install aframe

1. 在你的Vue组件中引入和使用组件：

<template>
  <div>
    <a-scene>
      <a-image
        width="200"
        src="assets/example-20.png"
      />
    </a-scene>
  </div>
</template>

<script>
import 'arco-design/dist/arco.css';
import AFrame from 'aframe';

export default {
  name: 'YourComponent',
  components: {
    AFrame
  }
}
</script>

1. 在你的Vue组件中增加A-Frame配置：

mounted() {
    const arcoScene = document.querySelector('a-scene');
    arcoScene.addEventListener('loaded', () => {
      const assets = document.querySelector('a-assets');
      const img = document.createElement('img');
      img.src = 'assets/example-20.png';
      assets.appendChild(img);

      const image = document.createElement('a-image');
      image.setAttribute('src', '#example-20.png');
      image.setAttribute('width', '200');
      arcoScene.appendChild(image);
    });
  }

上述代码会在组件加载之后将你的图片添加到A-Frame的资源中，并创建元素来显示图片。

请确保图片路径配置正确，并且图片在路径中是可以访问的。