Изображения не отображаются (VueJS - используется v-for) - PullRequest
Новая
       11

Изображения не отображаются (VueJS - используется v-for)

0 голосов
/ 02 мая 2018

Итак, я довольно новичок в 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"
  }
]

Вот моя файловая структура: введите описание изображения здесь

1 Ответ

0 голосов
/ 03 мая 2018

поместите вашу папку img в папку / static и измените ваш путь увидеть : webpack.dev.conf.js

...