लूप में प्रदर्शित नहीं होने वाली छवि 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

यह मुद्दा इवान यू के निम्नलिखित उद्धरण के साथ करना है, जो यहां पाया जा सकता है :

क्योंकि छविपथ रनवे पर केवल Vue द्वारा प्रस्तुत किया गया है, वेबपैक के पास इसे फिर से लिखने का कोई मौका नहीं है।

आपका 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

गतिशील छवियों का उपयोग करने के लिए, आवश्यकता () का उपयोग करें। आपको इसमें बदलाव करना होगा।

<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

आप एक लूप के लिए उपयोग कर सकते हैं जो गलत होने पर मुझे सही करने में मदद कर सकता है