Изображение не отображается в цикле Vue.js [дубликат]

Aug 17 2020

Я пытаюсь отобразить 9 разных изображений в цикле, используя v-for.

Но они не отображаются. Если я покажу это без петли, это сработает.

Я извлекаю нужный ресурс, но он все равно не отображается.

Это мой код:

<img class="list-complete-img" src="../assets/g1.jpg" alt="" /> //This works
<div v-for="item in data.items" :key="item.id">
    <div>
        {{ item.src }} // Just to check if I am printing right
    </div>
    <img class="list-complete-img" :src="item.src" :alt="item.src" /> // This does not work
</div>

Теперь результат, который я получаю:

Это мой data.json:

 "items": [
    { "id": "1", "src": "../assets/g1.jpg", "tags": ["all", "tag1"] },
    { "id": "2", "src": "../assets/g2.png", "tags": ["all", "tag2"] },
    { "id": "3", "src": "../assets/g3.png", "tags": ["all", "tag2"] },
    { "id": "4", "src": "../assets/g4.png", "tags": ["all", "tag1"] },
    { "id": "5", "src": "../assets/g5.png", "tags": ["all", "tag1"] },
    { "id": "6", "src": "../assets/g6.png", "tags": ["all", "tag2"] },
    { "id": "7", "src": "../assets/g7.jpg", "tags": ["all", "tag1"] },
    { "id": "8", "src": "../assets/g8.png", "tags": ["all", "tag2"] },
    { "id": "9", "src": "../assets/g9.png", "tags": ["all", "tag2"] }
  ]

РЕДАКТИРОВАТЬ

До сих пор я заметил, что проблема заключается в расширении src. Если я использую ссылку на изображение, она работает нормально. Но не с локальным изображением (только если я использовал кучу локальных изображений в цикле и отлично работал в одиночном). Итак, что я могу сделать, так это поместить сюда каталог с файлами. Я бы порекомендовал, если кто-нибудь из вас может попробовать на своем локальном компьютере и попытаться загрузить изображения из своего файлового каталога в цикле и опубликовать его здесь.


Решено

Ему нужен именно этот оператор:, requireпуть к каталогу и имя изображения.

<div v-for="item in items" :key="item.id">
    <div>
        {{ item.src }}
    </div>
    <img
        class="list-complete-img"
        :src="require(`../assets/${item.src}`)"
        :alt="item.src"
    />
</div>

Ответы

2 vchan Aug 17 2020 at 15:17

Эта проблема связана со следующей цитатой Эвана Ю, которую можно найти здесь :

Поскольку imagePath визуализируется Vue только во время выполнения, Webpack не имеет возможности его переписать.

Ваш JavaScriptкод должен быть таким:

export default {
  name: "App",
  data: function () {
    return {
      items: [
        { id: "1", src: "logo.png", tags: ["all", "tag1"] },
        { id: "2", src: "logo.png", tags: ["all", "tag2"] },
        { id: "3", src: "logo.png", tags: ["all", "tag2"] },
        { id: "4", src: "logo.png", tags: ["all", "tag1"] },
        { id: "5", src: "logo.png", tags: ["all", "tag1"] },
        { id: "6", src: "logo.png", tags: ["all", "tag2"] },
        { id: "7", src: "logo.png", tags: ["all", "tag1"] },
        { id: "8", src: "logo.png", tags: ["all", "tag2"] },
        { id: "9", src: "logo.png", tags: ["all", "tag2"] },
      ],
    };
  },
  methods: {
    getImgUrl: function (imagePath) {
      return require('@/assets/' + imagePath);
    }
  }
};

После этого вам нужно вызвать вашу getImgUrlфункцию, передав имя файла. Ваш HTMLбудет такой:

<div id="app">
  <img class="list-complete-img" src="./assets/logo.png" />
  <div v-for="item in items" :key="item.id">
    <img class="list-complete-img" :src="getImgUrl(item.src)" />
  </div>
</div>

Поскольку у меня нет доступа к вашим изображениям, я позволил себе использовать логотип Vue в качестве изображения.

Таким образом, указанная выше проблема должна быть связана с тем, что при Vueкомпиляции она берет все ресурсы и помещает их в другую папку, как на изображении ниже:

Следуйте этому шаблону, и ваш пример также будет работать. Наслаждаться!

РЕДАКТИРОВАТЬ: Если хотите, вы можете поместить свои статические активы в общую папку. Таким образом, вы сможете писать статические пути для своих активов.

1 ehsan Aug 17 2020 at 13:34

попробуй это: v-for="(item, i) in items" :key="i"

1 Tony Aug 17 2020 at 17:34

Чтобы использовать динамические изображения, используйте require (). Измените то, что у вас есть, на это.

<div id="app">
    <div v-for="item in data.items" :key="item.id">
        <img ... :src="require(item.src)" />
    </div>
</div>

saiprabhav Aug 17 2020 at 19:19

вы можете использовать цикл for, который может помочь исправить меня, если я ошибаюсь