Vue.js গতিশীল চিত্রগুলি কাজ করছে না

Question 1

আমি একটি মামলা যেখানে আমার আছে Vue.jsসঙ্গে webpackওয়েব অ্যাপ্লিকেশন, আমি গতিশীল চিত্রগুলি প্রদর্শনের জন্য প্রয়োজন। আমি imgচিত্রগুলির ফাইলের নামটি একটি ভেরিয়েবলে কোথায় সঞ্চয় করা আছে তা দেখাতে চাই । সেই পরিবর্তনশীল হ'ল এমন computedসম্পত্তি যা কোনও Vuexস্টোর ভেরিয়েবল ফিরিয়ে দেয় , যা অবিচ্ছিন্নভাবে পপুলেশন করা হচ্ছে beforeMount।

<div class="col-lg-2" v-for="pic in pics">
   <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>

যাইহোক এটি ঠিকভাবে কাজ করে যখন আমি ঠিক করি:

<img src="../assets/dog.png" alt="dog">

আমার কেস এই ঝাঁকুনির সাথে সমান , তবে এখানে এটি আইএমজি ইউআরএল নিয়ে কাজ করে তবে প্রকৃত ফাইল পাথের সাথে এটি কাজ করে না।

এটি করার সঠিক উপায়টি কী হওয়া উচিত?

Question 2

আমি কোড অনুসরণ করে এই কাজ পেয়েছি

  getImgUrl(pet) {
    var images = require.context('../assets/', false, /\.png$/)
    return images('./' + pet + ".png")
  }

এবং এইচটিএমএলে:

<div class="col-lg-2" v-for="pic in pics">
   <img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>

তবে নিশ্চিত না কেন আমার আগের পদ্ধতির কাজ হয়নি not

Question 3

এখানে একটি শর্টহ্যান্ড যা ওয়েবপ্যাকটি ব্যবহার করবে যাতে আপনার ব্যবহার করতে হবে না require.context।

এইচটিএমএল:

<div class="col-lg-2" v-for="pic in pics">
    <img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>

মান পদ্ধতি:

getImgUrl(pic) {
    return require('../assets/'+pic)
}

আর আমি যে প্রথম 2 অনুচ্ছেদ এটি এখানে ব্যাখ্যা কেন এই কাজ? আমরা হব.

দয়া করে মনে রাখবেন যে আপনার পোষা প্রাণীর ছবিগুলি আপনার অন্য সমস্ত চিত্রের সম্পদের সাথে লবিং না করে সাব-ডিরেক্টরিতে রেখে দেওয়া ভাল ধারণা। তাই ভালো:./assets/pets/

Question 4

আপনি requireফাংশন চেষ্টা করতে পারেন । এটার মত:

<img :src="require(`@/xxx/${name}.png`)" alt class="icon" />

Question 5

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

<img :src="'/img/' + pic + '.png'" v-bind:alt="pic" >

এই স্থানে আপনাকে আপনার স্থির চিত্রগুলি রাখা দরকার:

Question 6

আপনার সেরা বাজি হ'ল প্রদত্ত সূচকে চিত্রের জন্য সঠিক স্ট্রিংটি তৈরি করতে কেবল একটি সহজ পদ্ধতি ব্যবহার করা:

methods: {
  getPic(index) {
    return '../assets/' + this.pics[index] + '.png';
  }
}

তারপরে আপনার ভিতরে নিম্নলিখিতটি করুন v-for:

<div class="col-lg-2" v-for="(pic, index) in pics">
   <img :src="getPic(index)" v-bind:alt="pic">
</div>

এখানে জেএসফিডেল (স্পষ্টতই চিত্রগুলি দেখায় না, তাই আমি চিত্রটি ইমেজের srcপাশে রেখেছি ):

https://jsfiddle.net/q2rzssxr/

Question 7

আমি এই সমস্যাটিকেও আঘাত করেছি এবং দেখে মনে হচ্ছে উভয় সর্বাধিক উত্সাহিত উত্তরগুলি কাজ করে তবে একটি ক্ষুদ্র সমস্যা রয়েছে, ওয়েবপ্যাক ব্রাউজার কনসোলে একটি ত্রুটি নিক্ষেপ করে (ত্রুটি: ওয়েবপ্যাককন্টেক্সট্রেসলভে মডিউল '। / সংজ্ঞায়িত' খুঁজে পাচ্ছে না) যা খুব সুন্দর নয়।

তাই আমি এটিকে কিছুটা আলাদাভাবে সমাধান করেছি। ভেরিয়েবলের অভ্যন্তরের পুরো সমস্যাটি হ'ল বিবৃতিটির প্রয়োজন বান্ডিলিংয়ের সময় বিবৃতি কার্যকর করা হয় এবং বিবৃতিটির ভিতরে পরিবর্তনশীল কেবল ব্রাউজারে অ্যাপ প্রয়োগের সময় উপস্থিত হয়। সুতরাং ওয়েবপ্যাক প্রয়োজনীয় চিত্রটিকে অপরিজ্ঞাত হিসাবে দেখায় যেমন সংকলনের সময় যে ভেরিয়েবলের অস্তিত্ব নেই।

আমি যা করেছি তা হল এলোমেলো চিত্রের বিবরণী রাখা এবং সেই চিত্রটি সিএসএসে লুকিয়ে রাখা, সুতরাং কেউ এটিকে দেখেনি।

// template
<img class="user-image-svg" :class="[this.hidden? 'hidden' : '']" :src="userAvatar" alt />

//js
data() {
  return {
    userAvatar: require('@/assets/avatar1.svg'),
    hidden: true
  }
}

//css
.hidden {display: none}

চিত্র ভয়েক্সের মাধ্যমে ডেটাবেস থেকে প্রাপ্ত তথ্যের অংশ হিসাবে আসে এবং একটি গণন হিসাবে উপাদানগুলিতে ম্যাপ করা হয়

computed: {
  user() {
    return this.$store.state.auth.user;
  }
}

সুতরাং একবার এই তথ্যটি পাওয়া গেলে আমি প্রাথমিক চিত্রটি আসলটির সাথে বদলে যাই

watch: {
  user(userData) {
    this.userAvatar = require(`@/assets/${userData.avatar}`);
    this.hidden = false;
  }
}

Question 8

এখানে খুব সহজ উত্তর। : ডি

<div class="col-lg-2" v-for="pic in pics">
   <img :src="`../assets/${pic}.png`" :alt="pic">
</div>

Question 9

পাওয়া যায়নি এমন চিত্রগুলির সাহায্যে আপনি ক্যাপ ব্লক ব্যবহার করতে পারেন

getProductImage(id) {
          var images = require.context('@/assets/', false, /\.jpg$/)
          let productImage = ''
          try {
            productImage = images(`./product${id}.jpg`)
          } catch (error) {
            productImage = images(`./no_image.jpg`)
          }
          return productImage
},

Question 10

<img src="../assets/graph_selected.svg"/>

স্থির পথটি ওয়েব প্যাকের মাধ্যমে লোডার মাধ্যমে মডিউল নির্ভরতা হিসাবে সমাধান করা হয়। তবে গতিশীল পাথের জন্য আপনাকে পাথটি সমাধানের জন্য প্রয়োজন। তারপরে আপনি বুলিয়ান ভেরিয়েবল এবং টের্নারি এক্সপ্রেশন ব্যবহার করে চিত্রগুলির মধ্যে স্যুইচ করতে পারেন।

<img :src="this.graph ? require( `../assets/graph_selected.svg`) 
: require( `../assets/graph_unselected.svg`) " alt="">

এবং অবশ্যই কিছু ইভেন্ট হ্যান্ডলারের মাধ্যমে বুলিয়ানের মান টগল করুন।

Question 11

Vue.js ব্যবহার করে vue-loader, ওয়েবপ্যাকের জন্য একটি লোডার যা সংকলনকালে পাথগুলি পুনরায় লেখার / রূপান্তর করার জন্য সেট আপ করা হয়েছে, যাতে আপনাকে স্থিতিশীল পাথগুলি সম্পর্কে উদ্বিগ্ন হতে না পারে যা মোতায়েনের মধ্যে পৃথক হবে (স্থানীয়, দেব, একটি হোস্টিং প্ল্যাটফর্ম বা অন্য) , আপনাকে আপেক্ষিক স্থানীয় ফাইল সিস্টেমের পাথগুলি ব্যবহার করার অনুমতি দিয়ে । এটি অন্যান্য সুবিধাগুলি যেমন সম্পদ ক্যাচিং এবং সংস্করণ যুক্ত করে (আপনি সম্ভবত প্রকৃত srcURL তৈরি হচ্ছে তা পরীক্ষা করে দেখতে পারেন )।

সুতরাং এমন একটি সিআরসি থাকা যা সাধারণত পরিচালনা করে vue-loader সিআরসি থাকা / ওয়েবপ্যাক গতিশীল এক্সপ্রেশন হিসাবে সেট করা, রানটাইমের সময় মূল্যায়ন করা, এই প্রক্রিয়াটি নিস্ক্রিয় করবে এবং উত্পন্ন ডায়নামিক ইউআরএল প্রকৃত স্থাপনার প্রসঙ্গে অবৈধ হবে (এটি সম্পূর্ণরূপে যোগ্য না হলে এটি ব্যতিক্রম) )।

পরিবর্তে, আপনি requireগতিশীল অভিব্যক্তিতে একটি ফাংশন কল ব্যবহার করবেন , vue-loader/ ওয়েবপ্যাক এটি দেখতে পাবেন এবং সাধারণ যাদুটি প্রয়োগ করবেন।

উদাহরণস্বরূপ, এটি কাজ করবে না:

<img alt="Logo" :src="logo" />

computed: {
    logo() {
        return this.colorMode === 'dark'
               ? './assets/logo-dark.png'
               : './assets/logo-white.png';
    }
}

যদিও এটি কাজ করবে:

<img alt="Logo" :src="logo" />

computed: {
    logo() {
        return this.colorMode === 'dark'
               ? require('./assets/logo-dark.png')
               : require('./assets/logo-white.png');
    }
}

আমি নিজেই এই সম্পর্কে জানতে পেরেছি। আমাকে এক ঘন্টা সময় নিয়েছে কিন্তু ... তুমি বেঁচে আছ, তুমি শিখো, তাই না? 😊

Question 12

আমার পক্ষে সবচেয়ে ভাল ও সহজ উপায়টি হ'ল আমি এপিআই থেকে ডেটা আনছিলাম ..

methods: {
       getPic(index) {
    return this.data_response.user_Image_path + index;
  }
 }

getPic পদ্ধতিতে একটি প্যারামিটার লাগে যা ফাইলটির নাম এবং এটি ফাইলের পরম পথটি ফাইলের নাম সহ আপনার সার্ভার থেকে ফেরত দেয় ...

আমি এখানে এটি ব্যবহার করেছি এমন একটি উপাদানটির উদাহরণ এখানে দেওয়া হয়েছে:

<template>
    <div class="view-post">
        <div class="container">
     <div class="form-group">
             <label for=""></label>
             <input type="text" class="form-control" name="" id="" aria-describedby="helpId" placeholder="search here">
             <small id="helpId" class="form-text user-search text-muted">search for a user here</small>
           </div>
           <table class="table table-striped ">
               <thead>
                   <tr>
                       <th>name</th>
                       <th>email</th>
                       <th>age</th>
                       <th>photo</th>
                   </tr>
                   </thead>
                   <tbody>
                       <tr v-bind:key="user_data_get.id"  v-for="user_data_get in data_response.data">
                           <td scope="row">{{ user_data_get.username }}</td>
                           <td>{{ user_data_get.email }}</td>
                           <td>{{ user_data_get.userage }}</td>
                           <td><img :src="getPic(user_data_get.image)"  clas="img_resize" style="height:50px;width:50px;"/></td>
                       </tr>

                   </tbody>
           </table>
        </div>

    </div>
</template>

<script>
import axios from 'axios';
export default {
     name: 'view',
  components: {

  },
  props:["url"],
 data() {
     return {
         data_response:"",
         image_path:"",
     }
 },
 methods: {
       getPic(index) {
    return this.data_response.user_Image_path + index;
  }
 },
 created() {
     const res_data = axios({
    method: 'post',
    url: this.url.link+"/view",
   headers:{
     'Authorization': this.url.headers.Authorization,
     'content-type':this.url.headers.type,
   }
    })
    .then((response)=> {
        //handle success
      this.data_response = response.data;
      this.image_path = this.data_response.user_Image_path;
       console.log(this.data_response.data)
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });
 },
}
</script>


<style scoped>

</style>

Question 13

আমিও একই সমস্যার মুখোমুখি হয়েছি। এটি আমার জন্য '../assets/' থেকে './assets/' পরিবর্তন করে কাজ করেছে।

 <img v-bind:src="'./assets/' + pic + '.png'" v-bind:alt="pic">

Question 14

এখানে সমস্ত উত্তর চেষ্টা করেছিলাম তবে ভ্যু 2 এ আমার জন্য যা কাজ করেছে তা এই জাতীয়।

<div class="col-lg-2" v-for="pic in pics">
   <img :src="require(`../assets/${pic.imagePath}.png`)" :alt="pic.picName">
</div>