कैसे स्थिर जावास्क्रिप्ट के भीतर स्थिर संपत्ति का संदर्भ दें

Question

मैं स्थिर परिसंपत्तियों को संदर्भित करने के लिए सही यूआरएल की तलाश कर रहा हूं, जैसे कि वेव जावास्क्रिप्ट के भीतर की छवियां।

उदाहरण के लिए, मैं एक कस्टम आइकन छवि का उपयोग करके लीफलेट मार्कर बना रहा हूं, और मैंने कई यूआरएल आज़माए हैं, लेकिन वे सभी वापस आ जाते हैं 404 (Not Found):

Main.vue:

var icon = L.icon({
    iconUrl: './assets/img.png',
    iconSize:     [25, 25],
    iconAnchor:   [12, 12]
});

मैंने संपत्ति फ़ोल्डर और स्थिर फ़ोल्डर में छवियों को बिना किसी भाग्य के डालने की कोशिश की है। क्या मुझे उन छवियों को किसी तरह लोड करने की प्रतिज्ञा करनी है?

Comments

webpack? यह आमतौर पर जानना चाहता है कि क्या कोई छवि शामिल है इसलिए इसे बंडल में रखा जाता है। OTher बंडलिंग सिस्टम शायद परवाह नहीं करता है, जब तक कि छवि आपके सर्वर पर तैनात न हो जाए

— akatakritos

Answer 1

टेम्प्लेट से छवियों को संदर्भित करने के इच्छुक किसी भी व्यक्ति के लिए, आप सीधे '@' का उपयोग करके छवियों का उल्लेख कर सकते हैं

उदाहरण:

<img src="@/assets/images/home.png"/>

Comments

... आपके पास एक फ़ोल्डर है src / आस्तियों / चित्र। बॉक्स से बाहर, vue-loader संपत्तियों को src / .. / ... से बिल्ड /../ .. या डेटा के रूप में छोटे चित्रों को इनलाइन करता है। png .. स्वचालित रूप से।

— जोहानिस

मेरे लिए काम नहीं किया: This dependency was not found:* @/assets/more-ico.svg. To install it, you can run: npm install --save @/assets/more-ico.svg...

— जैकब स्ट्रेबेको

मेरे लिए भी काम नहीं किया, लेकिन ..... मैंने तब देखा कि मैंने गलत फ़ाइलनाम का इस्तेमाल किया है, पी पूरी तरह से काम करता है!

— लार्जन

यह काम करता है, लेकिन templateअगर आप css बैकग्राउंड-img प्रॉपर्टी में उपयोग करना चाहते हैं, तो कुछ ऐसा आज़माएं ../../assets/bg/login.svg, जैसे कि एसेट फोल्डर में इमेज हो

— calebeaires

धन्यवाद। स्थैतिक संपत्ति पर वाउ प्रलेखन अनावश्यक रूप से मौखिक रूप से होता है और इस प्राथमिक usecase को पृष्ठ के नीचे लगभग एक छोटे बुलेट बिंदु में दबा देता है।

— हमारा 30/06 का

Answer 2

Vue नियमित सेटअप में, /assetsपरोसा नहीं जाता है।

इसके src="data:image/png;base64,iVBORw0K...YII="बजाय चित्र स्ट्रिंग बन जाते हैं।

जावास्क्रिप्ट के भीतर से उपयोग करना: require()

जेएस कोड से चित्र प्राप्त करने के लिए, का उपयोग करें require('../assets.myImage.png')। पथ सापेक्ष होना चाहिए (नीचे देखें)।

तो आपका कोड होगा:

var icon = L.icon({
    iconUrl: require('./assets/img.png'),   // was iconUrl: './assets/img.png',
//  iconUrl: require('@/assets/img.png'), // use @ as alternative, depending on the path
    // ...
});

सापेक्ष पथ का उपयोग करें

उदाहरण के लिए, मान लें कि आपके पास निम्न फ़ोल्डर संरचना है:

- src
  +- assets
     - myImage.png
  +- components
     - MyComponent.vue

यदि आप छवि को संदर्भित करना चाहते हैं MyComponent.vue, तो पथ बोना हो सकता है../assets/myImage.png

यहाँ एक डेमो CODESANDBOX है जो इसे एक्शन में दिखा रहा है।

Comments

Vue-cli के साथ अपने ऐप को मचान करने के बाद, इस तकनीक ने मेरे लिए काम किया। कोड सैंडबॉक्स बहुत मददगार था। उत्तर सैंड सैंडबॉक्स के रूप में स्पष्ट नहीं है।

— रेवदर्र

require('./assets/img.png')मेरे घटक के विकल्पों में मेरे लिए काम नहीं किया, मुझे बदलना पड़ा। @ के साथ require('@/assets/img.png'):।

— माइकल 12

Answer 3

एक बेहतर समाधान होगा

@इसके बजाय उपयोग करने के लिए @ acdcjunior के उत्तर में कुछ अच्छे अभ्यास और सुरक्षितता जोड़ना./

जावास्क्रिप्ट में

require("@/assets/images/user-img-placeholder.png")

JSX टेम्पलेट में

<img src="@/assets/images/user-img-placeholder.png"/>

निर्देशिका के @लिए बिंदुओं का उपयोग करना src।

~परियोजना की जड़ के बिंदुओं का उपयोग करना, जिससे node_modulesऔर अन्य जड़ स्तर के संसाधनों तक पहुंचना आसान हो जाता है

Comments

क्या हुआ अगर इसकी छवि नहीं है, बल्कि एक पाठ फ़ाइल या सीएसवी है? और बस रास्ता / यूआरएल प्राप्त करना चाहते हैं?

— ट्रिनोनेसिस

Answer 4

वेबपैक के लिए सही परिसंपत्ति पथ वापस करने के लिए, आपको आवश्यकता का उपयोग करना होगा ('./ रिश्तेदार / पथ / से / file.jpg'), जो फ़ाइल-लोडर द्वारा संसाधित हो जाएगा और हल किए गए URL को लौटा देगा।

computed: {
  iconUrl () {
    return require('./assets/img.png')
    // The path could be '../assets/img.png', etc., which depends on where your vue file is
  }
}

VueJS टेम्प्लेट देखें - स्थैतिक आस्तियों को संभालना

Answer 5

स्क्रिप्ट टैग पर अत्याचार करने के ठीक बाद import someImage from '../assets/someImage.png' इसे आइकन यूआरएल के लिए जोड़ दें और उसका उपयोग करेंiconUrl: someImage

Comments

आयात में '@' को शामिल करते समय यह मेरे लिए अच्छा था।

— vab2048

Answer 6

आप किस सिस्टम का उपयोग कर रहे हैं? Webpack? Vue-लोडर?

मैं यहाँ केवल विचार-मंथन करूँगा ...

क्योंकि .Png एक जावास्क्रिप्ट फ़ाइल नहीं है, इसलिए आपको उन्हें संभालने के लिए फ़ाइल-लोडर या यूआरएल-लोडर का उपयोग करने के लिए वेबपैक को कॉन्फ़िगर करना होगा। Vue-cli के साथ इस प्रोजेक्ट को भी आपके लिए कॉन्फ़िगर किया गया है।

आप webpack.conf.jsयह देख सकते हैं कि यह अच्छी तरह से कॉन्फ़िगर किया गया है या नहीं

...
    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
...

/assets बंडलिंग के दौरान वेबपैक द्वारा हैंडल की जाने वाली फ़ाइलों के लिए है - इसके लिए, उन्हें आपके जावास्क्रिप्ट कोड में कहीं संदर्भित होना चाहिए।

अन्य संपत्तियों को रखा जा सकता है /static, इस फ़ोल्डर की सामग्री को /distबाद में इस तरह से कॉपी किया जाएगा ।

मैं आपको बदलने की कोशिश करने की सलाह देता हूं:

iconUrl: './assets/img.png'

सेवा

iconUrl: './dist/img.png'

आप आधिकारिक दस्तावेज यहां पढ़ सकते हैं: https://vue-loader.vuejs.org/en/configurations/asset-url.html

आशा है कि यह आपकी मदद करता है!

Comments

मुझे यकीन नहीं है कि मैं किस सिस्टम का उपयोग कर रहा हूं, या अगर मुझे इसे मैन्युअल रूप से जोड़ना है। मैंने ./dist url और नो लक की कोशिश की

— JBaczuk

Answer 7

Vue CLI द्वारा उत्पन्न फ़ोल्डरों की एक डिफ़ॉल्ट संरचना जैसे कि src/assetsआप अपनी छवि को वहां रख सकते हैं और इसे HTML से संदर्भित कर सकते हैं और <img src="../src/assets/img/logo.png">साथ ही साथ (परिनियोजन पर भी बिना किसी परिवर्तन के स्वचालित रूप से काम करता है)।

Answer 8

मैं प्रतिज्ञा के साथ टाइपस्क्रिप्ट का उपयोग कर रहा हूं, लेकिन यह है कि मैं इसके बारे में कैसे गया

<template><div><img :src="MyImage" /></div></template>
<script lang="ts">
    import { Vue } from 'vue-property-decorator';
    export default class MyPage extends Vue {
            MyImage = "../assets/images/myImage.png";
        }
</script>

Answer 9

यह अंत में मेरे लिए काम आया, छवि को प्रोप के रूप में पारित किया गया:

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

Answer 10

बेशक src="@/assets/images/x.jpgकाम करता है, लेकिन बेहतर तरीका है: src="~assets/images/x.jpg

Comments

क्या आप एक स्पष्टीकरण प्रदान कर सकते हैं?

— जेबाक्ज़ुक