কোন প্রকল্পে কৌনিকটিতে চিত্র (এবং অন্যান্য সম্পদ) কীভাবে লোড করবেন?

Question

আমি কৌণিকের পক্ষে বেশ নতুন তাই আমি নিশ্চিত না যে এটি করার সর্বোত্তম অনুশীলন।

আমি কৌণিক-ক্লিপ ব্যবহার করেছি এবং ng new some-projectএকটি নতুন অ্যাপ্লিকেশন তৈরি করতে।

এতে "সম্পদ" ফোল্ডারে একটি "চিত্র" ফোল্ডার তৈরি হয়েছে, তাই এখন আমার চিত্রগুলির ফোল্ডারটি src/assets/images

ইন app.component.html(যা আমার আবেদন মূল), আমি করা

<img class="img-responsive" src="assets/images/myimage.png">

আমি যখন ng serveআমার ওয়েব অ্যাপ্লিকেশনটি দেখতে পাই , তখন চিত্রটি প্রদর্শিত হয় না।

কৌণিক অ্যাপ্লিকেশনটিতে চিত্রগুলি লোড করার সেরা অনুশীলন কোনটি?

সম্পাদনা: নীচে উত্তর দেখুন। আমার প্রকৃত চিত্রের নামটি ফাঁকা স্থান ব্যবহার করছিল, যা অ্যাঙ্গুলার পছন্দ করেনি। আমি যখন ফাইলের নামের জায়গাগুলি সরিয়ে ফেললাম তখন চিত্রটি সঠিকভাবে প্রদর্শিত হবে।

Comments

হ্যাঁ আপনি ঠিকই বলেছেন, আপনি সম্পদ চারণকারী থেকে সঠিক পাথ সিনট্যাক্স দিয়েছেন, আপনার নামের সাথে মেলে না এমন সমস্যা হতে পারে, চিত্রটি উপস্থিত আছে কিনা তা পরীক্ষা করুন

— পারদীপ জৈন

অবশ্যই কোনও নামের সাথে publicsrc<img class="img-responsive" src="../../public/images/myimage.png">

— মেলে

ঠিক কর. আমার প্রকৃত চিত্র ফাইলের নামটিতে এর ফাঁকা স্থান ছিল এবং যে কোনও কারণে অ্যাংুলার এটি পছন্দ করেনি। আমি যখন আমার ফাইলের নাম থেকে ফাঁকা স্থানগুলি সরিয়েছি, assets/images/myimage.pngকাজ করেছি।

— ব্যবহারকারী3183717

ভাল :) বিটিডব্লিউ আপডেটেড ক্লাইমে অতিরিক্ত পাবলিক ফোল্ডার তৈরি করার দরকার নেই তাদের ইতিমধ্যে একই নামযুক্ত অ্যাসিট রয়েছে।

— পারদীপ জৈন

আমার অন্যান্য এক্সটেনশনের ফাইলগুলির সাথে একই ধরণের সমস্যা রয়েছে (উদাঃ .sgf) আমি এই ফাইলগুলি হোস্ট করতে এবং অ্যাপ্লিকেশন থেকে তাদের সাথে লিঙ্ক করতে চাই, তবে স্পষ্টতই কেবল সেগুলি assetsফোল্ডারে রাখাই যথেষ্ট নয়। কোন ধারনা ?

— bvdb

Answer 1

আমি এটা ঠিক করেছি. আমার প্রকৃত চিত্র ফাইলের নামটিতে এর ফাঁকা স্থান ছিল এবং যে কোনও কারণে অ্যাংুলার এটি পছন্দ করেনি। আমি যখন আমার ফাইলের নাম থেকে ফাঁকা স্থানগুলি সরিয়েছি, assets/images/myimage.pngকাজ করেছি।

Answer 2

আমার প্রকল্পে আমি আমার অ্যাপ ডটকম অংশে html এ নিম্নলিখিত সিনট্যাক্সটি ব্যবহার করছি:

<img src="/assets/img/1.jpg" alt="image">

বা

<img src='http://mruanova.com/img/1.jpg' alt='image'>

আপনি যখন ইন্টারপোলেশন ব্যবহার করে কোনও সম্পত্তি বাঁধছেন তখন [এসসিআর] টেম্পলেট এক্সপ্রেশন হিসাবে ব্যবহার করুন:

<img [src]="imagePath" />

এটার মতই:

<img src={{imagePath}} />

উত্স: এনজিফোর্ডে কৌনিক 2 এ ইমগ এসসিআর কীভাবে বাঁধবেন?

Comments

আপনার অ্যাপ.কম্পোনালটিএইচটিএমএল এবং একই স্তরের সম্পদ ফোল্ডারটি কী?

— হালিল

না, ফোল্ডারটির কাঠামোটি স্বয়ংক্রিয়ভাবে তৈরি হয়ে গেছে এবং আমার চেয়ে আপনার একই ফোল্ডার থাকা উচিত: প্রকল্প-ফোল্ডার \ src \ মূল্যায়ন \ এবং প্রকল্প-ফোল্ডার \ অ্যাপ \ app.componal.html যদি এটি দয়া করে উত্সাহিত করতে সহায়তা করে।

— mruanova

Answer 3

কৌণিক-ক্লিপ ডিফল্টরূপে বিল্ড বিকল্পগুলিতে সম্পদ ফোল্ডারকে অন্তর্ভুক্ত করে। আমার ইমেজের নামটিতে ফাঁকা জায়গা বা ড্যাশ থাকলে আমি এই সমস্যাটি পেয়েছি। উদাহরণ স্বরূপ :

• 'মাই-ইমেজ-নেম.পিএনজি' হওয়া উচিত 'মাই আইজামনেম.পিএনজি'
• 'আমার চিত্রের নাম.পিএনজি' 'মাইআইজেমনেম.পিএনজি' হওয়া উচিত

আপনি যদি সম্পত্তিটি / img ফোল্ডারে চিত্রটি রেখে দেন, তবে কোডের এই লাইনটি আপনার টেম্পলেটগুলিতে কাজ করা উচিত:

<img alt="My image name" src="./assets/img/myImageName.png">

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

Comments

[Alt] স্ট্রিংয়ের জন্য প্রয়োজনীয় নয়, [] ডেটা বাইন্ডিংয়ের জন্য।

— chris_r

Answer 4

Angular2 থেকে 5 এর সাথে সুনির্দিষ্ট হওয়ায় আমরা নীচের মতো সম্পত্তি বাঁধার ব্যবহার করে চিত্রের পথটি বাঁধতে পারি। চিত্রের পথটি একক উদ্ধৃতি চিহ্ন দ্বারা আবদ্ধ।

উদাহরণ উদাহরণ

<img [src]="'assets/img/klogo.png'" alt="image">

Comments

src = "সম্পদ / img / klogo.png" এবং [src] = "'সম্পদ / img / klogo.png'" এর মধ্যে পার্থক্য কী?

— gdbj

@gdbj এখানে উত্তর stackoverflow.com/questions/41426974/...

— মোহিত uprim

সুতরাং মূলত, আমরা যদি সেই পদ্ধতিটি ব্যবহার করে src পরিবর্তন করতে সক্ষম হতে চাই তবে আমরা মডেলটির সাথে আবদ্ধ হওয়ার জন্য [src] ব্যবহার করি।

— gdbj

থ্রেড জবাব দেওয়ার জন্য ধন্যবাদ মোহিত। @ জিডিবিজে আশা করি আপনি এতক্ষণে আপনার বিভ্রান্তি মিটিয়ে ফেলেছেন।

— ভুওয়ান মহার্জান

Gdbj দ্বারা এখানে প্রথম মন্তব্যে কেবলমাত্র ভবিষ্যতের পাঠকদের জন্য অভ্যন্তরীণ একক উদ্ধৃতিগুলি সন্ধান করতে চাই। তারা উপরের উত্তরের চেয়ে কমেন্ট ফন্টে দেখতে আরও শক্ত, তবে এগুলি হারিয়ে যাওয়া কিছু বিভ্রান্তির কারণ হতে পারে। (আপনার ব্রাউজারের উপর নির্ভর করতে পারে, নিশ্চিত নয়))

— সিলিথক্রো

Answer 5

ঘ। উপাদানটিতে শীর্ষে এই লাইনটি যুক্ত করুন।

declare var require: any

ঘ। আপনার উপাদান শ্রেণিতে এই লাইনটি যুক্ত করুন।

imgname= require("../images/imgname.png");

3. এইচটিএমএল পৃষ্ঠায় img src ট্যাগে এই 'imgname' যুক্ত করুন।

   <img src={{imgname}} alt="">

Comments

এটি সমতল নয় এমন ফাইলের শ্রেণিবিন্যাসের গাছের জন্য এটি আরও ভাল।

— chris_r

Answer 6

সাধারণত "অ্যাপ্লিকেশন" হ'ল আপনার আবেদনের মূল - আপনি কি চেষ্টা করেছেন app/path/to/assets/img.png?

Comments

ফোল্ডারের অধীনে কৌণিক-ক্লিপ পুট appএবং assetsআলাদাভাবে srcফোল্ডার। (দুঃখিত আমি ফোল্ডারের কাঠামো এবং নামগুলি কীভাবে ফর্ম্যাট করব সে বিষয়ে নিশ্চিত নই)

— user3183717

Answer 7

আমার জন্য "আমি" "চিত্রগুলিতে" মূলধন ছিল। যা কৌণিক-ক্লিপ পছন্দ করে না। সুতরাং এটি ক্ষেত্রে সংবেদনশীলও বটে।

Comments

নিশ্চিত না. লোকেরা কেন নেতিবাচক ভোট দেয়। এটি আমার দ্বারা আসল সমস্যা ছিল। এবং এখনও নেতিবাচক ভোট দিয়েছেন। আমি ভাবছি কেন আমার কিছু প্রশ্ন উত্তরহীন এবং লোকেদের সমাধানের জন্য সেখানে উত্সাহ দেয় না ??

— বেনামে স্রষ্টা

Answer 8

এটি সর্বদা নির্ভর করে আপনার এইচটিএমএল ফাইলটি কোথায় স্থির সংস্থানটির পথকে নির্দেশ করে (এই ক্ষেত্রে চিত্রটি)।

উদাহরণ এ:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yourpage.html

যেহেতু আপনি দেখতে পারেন, yourpage.html রুট (src ফোল্ডারের) থেকে একটি ফোল্ডার দূরে, এই কারণে এটা এক পরিমাণ প্রয়োজন ../ ফিরে রুট যেতে তারপর আপনি রুট থেকে ইমেজ হেঁটে পারেন:

<img class="img-responsive" src="../assests/images/myimage.png">

উদাহরণ বি:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yoursubmodule
      |__yourpage.html

এখানে আপনাকে গাছের মধ্যে 2 ফোল্ডার করে যেতে হবে:

<img class="img-responsive" src="../../assests/images/myimage.png">