मेरे पास एक वू ऐप है, और इसमें एकाधिक छवि दीर्घाओं वाला मार्ग है। एक उपयोगकर्ता इन दीर्घाओं में से एक पर क्लिक करके एक गतिशील घटक पर ले जाया जा सकता है जो उन छवियों को प्रदर्शित करेगा जो उस विशिष्ट गैलरी से संबंधित हैं जिसे वे देख रहे हैं।

उदाहरण के लिए, उपयोगकर्ता को 2 कार्ड, foo और bar दिखाई देते हैं। उन पर क्लिक करने से उपयोगकर्ता /gallery/foo या /gallery/bar पर पहुंच जाएगा। मेरा एसेट फ़ोल्डर इस तरह व्यवस्थित है

src/assets/images
├── foo
│   └── 1.jpg
└── bar
    └── 2.jpg

तो प्रत्येक गैलरी में सभी छवियों के साथ एक संबंधित फ़ोल्डर होता है। मेरे पास यहां किसी भी प्रकार के डीबी या एपीआई तक पहुंच नहीं है, यह परियोजना मूल रूप से एक स्थिर वेबसाइट है और किसी भी प्रकार के बाहरी संसाधन को कॉल करना इस परियोजना के दायरे से बाहर है।

मैंने यहां वेबपैक के require.context() का उपयोग करने की कोशिश की, लेकिन यह एक गतिशील पथ के साथ काम नहीं करता है, जैसा कि मैं करने की कोशिश कर रहा हूं, जैसा कि वेबपैक अंक #4772

प्रासंगिक कोड जो मैंने कोशिश की

data() {
  return {
    images: null
  }
),
mounted() {
    this.populatePage();
  }
},
methods: {
  populatePage() {
    const imagePath = `@/assets/images/${this.$route.params.id}/`;
    this.images = this.importAll(require.context(imagePath, true, /\.(jpe?g)$/));
  },
  importAll(r) {
     return r.keys().map(r);
  }
}

यह स्पष्ट रूप से मेरे require.context() में imagePath का उपयोग करने के कारण Github मुद्दे में प्रदर्शित के रूप में काम नहीं करता है। अगर मैं सिर्फ @/assets/images/ करता हूं, तो यह ठीक काम करता है, लेकिन समस्या यह है कि यह इमेज डायरेक्टरी में हर एक jpg को इंपोर्ट करेगा, जो जाहिर तौर पर वह नहीं है जो मैं चाहता हूं।

यहां वांछित वांछित प्रभाव प्राप्त करने का सबसे अच्छा तरीका क्या है? अधिमानतः मैं किसी भी छवि को लोड करने से बचना चाहता हूं जो उस पृष्ठ से संबंधित नहीं है जिस पर उपयोगकर्ता है, क्योंकि संभावित रूप से उनमें से सैकड़ों हो सकते हैं, और भले ही उन्हें जितना संभव हो अनुकूलित किया गया हो, फिर भी वे काफी बड़े हो सकते हैं (~ 150kb प्रत्येक के रूप में ये एक बहुत ही उच्च संकल्प होना चाहिए)

प्रारंभ में मैंने सब कुछ आयात करने की कुछ भिन्नता करने की कोशिश की और फिर वेबपैक उत्पन्न होने वाले खंड से फ़ोल्डर नाम को फिर से शुरू कर दिया, लेकिन वेबपैक निर्देशिका को छोड़ देगा और इसके बजाय फ़ाइल नाम के अंत में एक अलग हैश जोड़ देगा। क्या वेबपैक को Vue में फ़ाइल नाम में निर्देशिका जोड़ने का कोई तरीका है, या वास्तव में सामान्य रूप से?

/img/1.2f159e72.jpg
/img/2.2c1da0da.jpg
3
Sensanaty 20 अगस्त 2020, 14:49

1 उत्तर

सबसे बढ़िया उत्तर

वेबपैक अत्यधिक विन्यास योग्य है। आप निर्देशिका संरचना को बनाए रखने के लिए इसे सेट कर सकते हैं - देखें फ़ाइल-लोडर दस्तावेज़

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
        },
      },
    ],
  },
};

फिर आप आसानी से संपूर्ण रूट डीआईआर (गैलरी निर्देशिकाओं के साथ) आयात करने के अपने मूल दृष्टिकोण का उपयोग कर सकते हैं और अपनी इच्छित गैलरी से केवल फाइलों को फ़िल्टर कर सकते हैं। सब कुछ आयात करने से डरो मत - file-loader तार पर फ़ाइल को "लोड" नहीं करता है, यह केवल फ़ाइल का यूआरएल देता है (निर्माण के दौरान)। फ़ाइल को ब्राउज़र में लोड करने के लिए, आपको इसे img टैग के अंदर उपयोग करना होगा (उदाहरण के लिए)

2
Michal Levý 25 अगस्त 2020, 10:41