时间戳

首页 > 解决方案 > 图片未显示（VueJS - 使用 v-for）

vuejs2 - 图片未显示（VueJS - 使用 v-for）

问题描述

所以我对 VueJS 还是很陌生，我一直在用它来创建一个网格状的图片库。我尝试使用 v-for 通过循环遍历包含每个图像信息的 JSON 文件来显示图像。我将包括所有这些。但这就是显示的内容（屏幕截图）： 所以图像不会显示

我没有检查与文件结构相关的链接。所以这是包含图片库的组件的代码（请注意，href 链接确实有效）：

<template>
<div>
  <div v-for="data in images" v-bind:key="data">
    <h2>{{data.Name}}</h2>
    <a :href="'#'+data.Name">
      <img :src="'../../../img/products/'+data.Name+'.png'" :alt="data.Name+'.png'" />
    </a>
  </div>

</div>
</template>

<script>
  import Prods from '../../../other/jsons/products.json'
  export default {
    data() {
      return {images: Prods}
    }...</script>

这是 JSON 文件（显然，它确实获取了数据）：

[
  {
    "ImageId": 0,
    "Name": "drinks"
  },
  {
    "ImageId": 1,
    "Name": "preppedfood"
  },
  {
    "ImageId": 2,
    "Name": "coffee"
  },
  {
    "ImageId": 3,
    "Name": "snacks"
  },
  {
    "ImageId": 4,
    "Name": "nuts"
  },
  {
    "ImageId": 5,
    "Name": "bars"
  },
  {
    "ImageId": 6,
    "Name": "water"
  },
  {
    "ImageId": 7,
    "Name": "fruit"
  },
  {
    "ImageId": 8,
    "Name": "cookies"
  },
  {
    "ImageId": 9,
    "Name": "cereal"
  },
  {
    "ImageId": 10,
    "Name": "healthfood"
  },
  {
    "ImageId": 11,
    "Name": "healthdrinks"
  },
  {
    "ImageId": 12,
    "Name": "waterdispenser"
  },
  {
    "ImageId": 13,
    "Name": "cutlery"
  },
  {
    "ImageId": 14,
    "Name": "office"
  },
  {
    "ImageId": 15,
    "Name": "more"
  }
]

这是我的文件结构：在此处输入图像描述

标签： vuejs2srcv-for

解决方案

将您的 img 文件夹放入 /static 文件夹并修改您的路径，请参见： webpack.dev.conf.js

推荐阅读