মান জাভাস্ক্রিপ্টের মধ্যে স্থিতিশীল সম্পদগুলি কীভাবে রেফারেন্স করা যায়

Question 1

আমি ভ্যু জাভাস্ক্রিপ্টের মধ্যে থাকা চিত্রগুলির মতো স্থিতিশীল সম্পদের জন্য রেফারেন্সের জন্য সঠিক url সন্ধান করছি।

উদাহরণস্বরূপ, আমি একটি কাস্টম আইকন চিত্র ব্যবহার করে একটি লিফলেট মার্কার তৈরি করছি এবং আমি বেশ কয়েকটি ইউআরএল চেষ্টা করেছি, তবে তারা সবাই একটি ফেরত দেয় 404 (Not Found):

মেইন.ভ্যু:

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

আমি ভাগ্যগুলি ছাড়াই সম্পদ ফোল্ডারে এবং স্ট্যাটিক ফোল্ডারে চিত্রগুলি রাখার চেষ্টা করেছি। এই চিত্রগুলি কোনওভাবে লোড করার জন্য আমাকে কি ভ্যূ বলতে হবে?

Question 2

টেমপ্লেট থেকে চিত্রগুলি রেফার করার জন্য যে কেউ খুঁজছেন, আপনি সরাসরি '@' ব্যবহার করে চিত্রগুলি উল্লেখ করতে পারেন

উদাহরণ:

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

Question 3

একটি /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

এটি কার্যকরভাবে দেখানো একটি ডেমো কোডস্যান্ডবক্স এখানে ।

Question 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 টেমপ্লেটগুলি দেখুন - স্থির সম্পদ পরিচালনা করা

Question 5

আরও ভাল সমাধান হতে পারে

@পরিবর্তে ব্যবহারের জন্য @ acdcjunior এর উত্তরে কিছু ভাল অনুশীলন এবং নিরাপত্তা যুক্ত করা./

জাভাস্ক্রিপ্টে

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

জেএসএক্স টেমপ্লেটে

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

ডিরেক্টরিতে @পয়েন্ট ব্যবহার করে src।

ব্যবহার ~প্রকল্পের রুট, যা এটি সহজে অ্যাক্সেস করে তোলে পয়েন্ট node_modulesএবং অন্যান্য তৃণমূল পর্যায়ে সম্পদ

Question 6

স্ক্রিপ্ট ট্যাগের বিরোধিতা করার পরে ঠিক import someImage from '../assets/someImage.png' এটি আইকন ইউআরএল জন্য যুক্ত করুন এবং ব্যবহার করুনiconUrl: someImage

Question 7

আপনি কোন সিস্টেমটি ব্যবহার করছেন? ওয়েবপ্যাক? ভ্যু-লোডার?

আমি এখানে শুধু মস্তিষ্কে উত্তোলন করব ...

.Png কোনও জাভাস্ক্রিপ্ট ফাইল নয় বলে ফাইল-লোডার বা ইউআরএল-লোডারগুলি পরিচালনা করতে আপনাকে ওয়েবপ্যাকটি কনফিগার করতে হবে। ভ্যু-ক্লিমে ভাসমান প্রকল্পটি আপনার জন্য এটিও কনফিগার করেছে।

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

আশা করি এটি আপনাকে সাহায্য করবে!

Question 8

ভ্যু সিএলআই দ্বারা উত্পন্ন ফোল্ডারগুলির একটি ডিফল্ট কাঠামো থাকা যেমন src/assetsআপনি নিজের চিত্রটি সেখানে রাখতে পারেন এবং এটি এইচটিএমএল থেকে নীচে উল্লেখ করতে পারেন <img src="../src/assets/img/logo.png">(মোতায়েনের কোনও পরিবর্তন ছাড়াই স্বয়ংক্রিয়ভাবে কাজ করে)।

Question 9

আমি শপথের সাথে টাইপস্ক্রিপ্ট ব্যবহার করছি, কিন্তু আমি এটি সম্পর্কে এভাবেই চলেছি

<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>

Question 10

এটি অবশেষে আমার পক্ষে কাজ করেছে, চিত্রটি প্রপ হিসাবে পাস করেছে:

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

Question 11

অবশ্যই src="@/assets/images/x.jpgকাজ করে তবে আরও ভাল উপায় হ'ল: src="~assets/images/x.jpg

মান জাভাস্ক্রিপ্টের মধ্যে স্থিতিশীল সম্পদগুলি কীভাবে রেফারেন্স করা যায়

জাভাস্ক্রিপ্টের মধ্যে থেকে ব্যবহার করা: require()

আপেক্ষিক পথ ব্যবহার করুন

আরও ভাল সমাধান হতে পারে

জাভাস্ক্রিপ্টের মধ্যে থেকে ব্যবহার করা: `require()`