Question

我正在尝试将图像文件从public/images文件夹中的父文件夹导入到组件（Categories.vue）中，但是图像没有显示。

这是文件夹结构：

folder structure

这是代码：

<template>
  <div class="container">
      <div class="row">
          <div v-for="item in items" :key="item.name" class="col-lg-3 col-md-3">
              <div class="img-container">
                  <img v-bind:src="item.src" alt="" class="img-fluid">
                  <p class="text-dark"> {{ item.subtitle }} </p>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {   
          name:'first', 
          src:'./public/images/anubis.png', 
          subtitle: 'Anubis' 
        },
        { 
          name:'second', 
          src:'public/images/sarcophagus.png', 
          subtitle: 'Sarcophagus' 
        },
        { 
          name:'third', 
          src:'public/images/ra.png', 
          subtitle: 'Ra' 
        },
        { 
          name:'fourth', 
          src:'public/images/eye-of-ra.png', 
          subtitle: 'Eyes of Ra' 
        }
      ]
    }
  }
}
</script>

我很确定自己做对了所有事情。我尝试使用require()，但也失败了。我该如何解决这个问题？

Answer 1

您需要做的就是替换变量

src：'./ public / images / anubis.png'

与

src：'/ images / anubis.png'，

这将在所有实例中自动链接到您的公用文件夹。

Answer 2

您需要从src/assets文件夹中提供静态资产，以便Webpack可以看到图像，因此您需要将src / assets中的images文件夹放置在中，之后您就可以这样做了； < / p>

<template>
 <div v-for="(image, index) in images" :key='index'>
   <img :src='require(`@/assets/${image.src}`)' />
   <p class="text-dark"> {{ image.subtitle }} </p>
 </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      images: [
        { 
          name:'second', 
          src:'images/sarcophagus.png', 
          subtitle: 'Sarcophagus' 
        },
        { 
          name:'third', 
          src:'images/ra.png', 
          subtitle: 'Ra' 
        }
      ]
    }
  }
</script>

Answer 3

问题是您的src URL的前缀不正确是public/。对于基于public目录的URL，前缀实际上应该是process.env.BASE_URL中的public path（默认为/）

export default {
  data() {
    return {
      items: [
        {
          src: `${process.env.BASE_URL}images/anubis.png`,
        },
        {
          src: `${process.env.BASE_URL}images/sarcophagus.png`,
        },
        {
          src: `${process.env.BASE_URL}images/ra.png`,
        },
        {
          src: `${process.env.BASE_URL}images/eye-of-ra.png`,
        }
      ]
    }
  }
}

demo 1

请注意，public directory是作为last resort提供的。 Vue文档建议将资产放在src/assets下以实现最佳构建（即，只会缩小引用的图像并将其包含在构建中）。假设您使用src/assets/images包含图片，则src的网址为：

export default {
  data() {
    return {
      items: [
        {
          src: require('@/assets/images/anubis.png'),
        },
        {
          src: require('@/assets/images/sarcophagus.png'),
        },
        {
          src: require('@/assets/images/ra.png'),
        },
        {
          src: require('@/assets/images/eye-of-ra.png'),
        }
      ]
    }
  }
}

demo 2

图片未显示在Vue中

3 个答案: