图片未显示在Vue中

时间:2019-07-19 09:41:46

标签: vue.js vuejs2

我正在尝试将图像文件从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(),但也失败了。我该如何解决这个问题?

3 个答案:

答案 0 :(得分:1)

您需要做的就是替换变量

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

src:'/ images / anubis.png',

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

答案 1 :(得分:0)

您需要从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>

答案 2 :(得分:0)

问题是您的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