Vue 不显示图像答案

【问题标题】：Image not showing with VueVue 不显示图像
【发布时间】：2019-11-28 06:54:52
【问题描述】：

我正在尝试将图像文件从 public/images 文件夹中的父文件夹导入到组件 (Categories.vue)，但图像未显示。

这是文件夹结构：

这是代码：

<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()，但也失败了。我该如何解决这个问题？

【问题讨论】：

你可以在 stackoverflow 上轻松找到解决方案，只需花 5 分钟寻找它......stackoverflow.com/questions/54728285/…
你在使用 Vue CLI 吗？
@onuriltan 是的，我正在使用 vue cli

标签： vue.js vuejs2

【解决方案1】：

你需要做的就是替换你的变量

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

与

src:'/images/anubis.png',

这将在所有情况下自动链接到您的公用文件夹。

【讨论】：

【解决方案2】：

你需要从src/assets文件夹中提供静态资源，这样webpack才能看到图片，所以你需要把图片文件夹放在src/assets中之后你就可以这样做了；

<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>

【讨论】：

【解决方案3】：

问题是您的src URL 错误地以public/ 为前缀。对于基于public 目录的URL，前缀实际上应该是public path，在process.env.BASE_URL 中找到（默认等于/）：

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

【讨论】：