लूप में प्रदर्शित नहीं होने वाली छवि Vue.js [डुप्लिकेट]
मैं एक लूप में 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>
जवाब
यह मुद्दा इवान यू के निम्नलिखित उद्धरण के साथ करना है, जो यहां पाया जा सकता है :
क्योंकि छविपथ रनवे पर केवल 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
संकलित किया जाता है, तो यह सभी संपत्तियों को लेता है और उन्हें नीचे दिए गए चित्र की तरह किसी अन्य फ़ोल्डर में डालता है:
इस पैटर्न का पालन करें और आपका उदाहरण भी काम करेगा। का आनंद लें!
संपादित करें: यदि आप चाहें, तो आप सार्वजनिक फ़ोल्डर में अपनी स्थिर संपत्ति रख सकते हैं। इस तरह, आप अपनी संपत्ति के लिए स्थिर पथ लिख पाएंगे।
इसे इस्तेमाल करे: v-for="(item, i) in items" :key="i"
गतिशील छवियों का उपयोग करने के लिए, आवश्यकता () का उपयोग करें। आपको इसमें बदलाव करना होगा।
<div id="app">
<div v-for="item in data.items" :key="item.id">
<img ... :src="require(item.src)" />
</div>
</div>
आप एक लूप के लिए उपयोग कर सकते हैं जो गलत होने पर मुझे सही करने में मदद कर सकता है