изображенията не могат да се показват с v-bind в v-for цикъл

Знам, че има много въпроси и отговори за това как да използвам v-bind във v-for за свързване към img src ... но прекарах цял ден в напразни експерименти. Извинявам се за дублиращия се въпрос, но може ли някой да ми помогне?

Използвам [email protected] и @vue/cli 4.5.6. Опитвам се да покажа множество изображения във v-for цикъл, обвързвайки файловите пътища към img src. Имам данни за умения в Skills.json, опитвам се да ги покажа в Skills.vue. Кодът по-долу показва само празен екран.

Всяка помощ се оценява, благодаря.

умения.json

[
  {
    "id": 1,
    "name": "C#",
    "logo": "C-Sharp.svg"
  },
  {
    "id": 2,
    "name": "Azure",
    "logo": "azure.svg"
  }
]

Умения.vue

Разглеждайки инструмента за разработчици vue, мога да потвърдя, че данните са правилно импортирани в масива с умения (но не се показват).

<template>
  <div class="container">
    <div class="items">
      <div class="item" v-for="skill in skills" :key="skill.id">
        <img :src="require(`${logoPath}${skill.logo}`)" />
      </div>
    </div>
  </div>
</template>

<script>
import skillsJson from '../assets/skills.json';

export default {
    data() {
        return {
            skills: skillsJson,
            logoPath: '../assets/img/',
        };
    },
};
</script>

структура на папката src

C:.
│  App.vue
│  main.js
├─assets
│  │  skills.json
│  ├─icons
│  ├─img
│  │      azure.svg
│  │      C-Sharp.svg
│  └─scss
├─components
├─router
│      index.js
└─views
        Experience.vue
        HelloWorld.vue
        Home.vue
        Skills.vue

vue.js bind v-for
person ari    schedule 05.10.2020    source източник
comment
require() за какво?? опита ли :src="logoPath + '/' + skill.logo"   -  person Ifaruki    schedule 05.10.2020
comment
Здравей Ифаруки. Благодаря за коментара. е.пр. според връзката по-долу се казва, че е необходимо изискване, ако се използва webpack. stackoverflow .com/questions/55152795/ Току-що написах vue create {projectname}, така че предполагам, че webpack се използва за моя проект. Опитах вашия източник, сега той показва изображения с икони за неработеща връзка.   -  person ari    schedule 05.10.2020

Отговори (1)


arrow_upward
1
arrow_downward

Трябва да разберете, че require() (или import()) се обработва от Webpack по време на изграждане. Webpack не може да изпълни вашия код (по време на компилация) и евентуално да знае каква ще бъде стойността по време на изпълнение. Разгледайте документи (става въпрос за import() но require() е почти същото)

Проста корекция би била да се направи само част от пътя динамичен, така че Webpack да получи поне някакъв намек какъв файл трябва да бъде наличен...

Сменете

<img :src="require(`${logoPath}${skill.logo}`)" />

by

<img :src="require(`../assets/img/${skill.logo}`)" />

TLDR

require() на Webpack има нужда поне част от пътя на файла да бъде напълно статичен!

person Michal Levý    schedule 05.10.2020
comment
Здравей Леви, благодаря ти за коментара. Сега работи! Според документите предполагам, че това е причината за проблема... Не е възможно да се използва напълно динамичен оператор за импортиране, като import(foo). Тъй като foo потенциално може да бъде всеки път до всеки файл във вашата система или проект. Import() трябва да съдържа поне малко информация за това къде се намира модулът. Трябва да научите как работи Webpack... Благодаря ви за помощта. - person ari; 05.10.2020