Question

我有一些图片的轮播。我可以使用URL链接显示图片，但是当我要显示存储在计算机中的图片而不是URL时，它不显示图片。通过自己的计算机将图片添加到旋转木马的方式是什么？

以下是代码：

<template>
<div class="caro">

 <v-carousel >
  <v-carousel-item
    v-for="(item,i) in items"
    :key="i"
    :src="item.src"
  >

    <div class="text-xs-center">
    </div>

  </v-carousel-item>
 </v-carousel>
</div>
</template>

<script>
export default {
 data () {
  return {
    items: [
      {
        id: 'rack', src: 'https://logisticpackaging.com/CrXBdba4vG7B2k/wPHm6Sft56fw2V/wp-content/uploads/2015/06/pcb-racking-system5.jpg', title:'Rack Section'
      },
      {
        id: 'subrack', src: '../assets/Parts.jpg' , title: 'Subrack Section'
      },

      {
        id: 'parts', src: '../Hasan.jpg' , title: 'Parts Section'
      },
      {
        id: 'admin', src: 'https://d15shllkswkct0.cloudfront.net/wp-content/blogs.dir/1/files/2013/04/Transactional-Database.jpg' , title: 'Database Section'
      }
    ]
  }
}

在我的示例中，“机架”和“管理员”部分确实有图片，因为它们是从互联网上获取的。但是“ parts”和“ subrack”没有图片，因为我试图使用自己计算机上的图片。

Answer 1

您是在开发人员模式还是在Build下运行npm？我有一个名为public的文件夹，我将所有图像/ svg等都放在此公共文件夹的文件夹中，因为webpack会使用vue代码构建此文件夹。

因此，我使用src="img/brand/logo.svg"

作为来源

除非您不使用webpack和vue构建模板，否则我不建议将图像放置在公共文件夹之外的其他位置。此文件夹易于复制，并且很可能会被webpack复制，因此您可以将所有内容上传到dist文件夹中。

Answer 2

您要在轮播中渲染的两张照片来自两个不同的来源，代码没有问题，请仔细检查照片来源并确认代码中的照片扩展名与来源中的照片扩展名匹配文件夹

在Vuetify中从您自己的计算机向Carousel添加图片

2 个答案: