কীভাবে কেবল সিএসএস / এইচটিএমএল ব্যবহার করে চিত্র ভাঙা আইকনটি লুকিয়ে রাখবেন?

Question

আমি কীভাবে ভাঙা চিত্রের আইকনটি আড়াল করতে পারি? উদাহরণ :

আমার ত্রুটিযুক্ত এসসিআর সহ একটি চিত্র রয়েছে:

<img src="Error.src"/>

সমাধানটি অবশ্যই সমস্ত ব্রাউজারে কাজ করবে।

Comments

আমি Alt = "" সেট করার চেষ্টা করেছি এবং সিএসএস লাইভ: g পটভূমি: ইউআরএল (এসসিআর), প্রস্থ: ... ইমগ তেগ ব্যাকগ্রাউন্ড সেট করতে চেষ্টা করেছি; উচ্চতা: ..} তবে এটি সত্য নয়। আমার আইএমজি ট্যাগ অবশ্যই লুকিয়ে রাখতে হবে এসসিআর ভাঙ্গা।

— জেরে সুইনভ

এখানে একটি সম্ভাব্য সমাধান দেখুন - স্ট্যাকওভারফ্লো / প্রশ্ন / 18484753/… তবে জেএস প্রয়োজন তবে। আপনি একা সিএসএস দিয়ে এটি করতে পারবেন না।

— জোহানভিডিআর

দেখুন w3schools.com/jsref/event_onerror.asp "onerror" অ্যাট্রিবিউট

— Amy.js

Answer 1

সিএসএস / এইচটিএমএলের কোনও উপায় নেই যে চিত্রটি লিংকটি ভেঙে গেছে কিনা, তাই আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে যাই হোক না কেন

তবে চিত্রটি গোপন করার জন্য, বা উত্সটি ব্যাকআপের মাধ্যমে প্রতিস্থাপনের জন্য এখানে একটি ন্যূনতম পদ্ধতি।

<img src="Error.src" onerror="this.style.display='none'"/>

অথবা

<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>

হালনাগাদ

আপনি এই যুক্তিটি একবারে একাধিক ছবিতে এই জাতীয় কিছু করে প্রয়োগ করতে পারেন:

document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelectorAll('img').forEach(function(img){
  	img.onerror = function(){this.style.display='none';};
   })
});

<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">

আপডেট 2

একটি জন্য সিএসএস বিকল্প দেখতে michalzuber এর উত্তর নিচে। আপনি পুরো চিত্রটি আড়াল করতে পারবেন না, তবে ভাঙা আইকনটি কীভাবে দেখায় তা পরিবর্তন করুন।

Comments

আপনি এটি কেবলমাত্র HTML ট্যাগের সাহায্যে এটি অবজেক্ট ট্যাগ ব্যবহার করে করতে পারেন যেহেতু এটি img ট্যাগের মতো চিত্র প্রদর্শন করতে ব্যবহৃত হতে পারে, এবং চিত্রটি উপস্থিত না থাকলে কোনও ভাঙা লিঙ্ক প্রদর্শন করে না, এটি সমস্ত ব্রাউজারে এবং যতদূর ফিরে কাজ করে IE8 হিসাবে নিজে থেকে সমস্ত, আপনি এমনকি এই পদ্ধতিতে ডিফল্ট চিত্র ব্যবহার করতে পারেন, আমি নীচের বিবরণ সহ একটি উত্তর পোস্ট করেছি।

— নিক স্টিল 9

এটি আমার জন্য <অবজেক্ট> পদ্ধতির পরিবর্তে কাজ করেছে কারণ আমার ঘোষিত মার্জিনের জন্য ছবিটির প্রয়োজন ছিল তবে কেবলমাত্র একটি বৈধ চিত্র পাওয়া গেলে অন্যথায় আমার শূন্য স্থান গ্রহণের প্রয়োজন ছিল। <অবজেক্ট> এর ওনারর ইভেন্টটি নেই, সুতরাং এটি কোনও বিকল্প ছিল না। মার্জিনটি মুছে ফেলার একটি শৈলীর বিধি: একটি খালি সিউডো ক্লাস ব্যবহার করে, বস্তুটিতে কখনই ট্রিগার করা হয়নি।

— জন হ্যাটন

আমার একটা প্রশ্ন আছে. প্রতিটি চিত্র ট্যাগে স্ক্রিপ্টের এই নির্দিষ্ট লাইনটি দেওয়ার পরিবর্তে পৃষ্ঠার প্রতিটি চিত্র ট্যাগের জন্য স্ক্রিপ্টটি সাধারণভাবে প্রয়োগ করার কোনও উপায় আছে কি? আপনাকে ধন্যবাদ কেভিন জ্যান্টজার

— লেমডোর

@ লেমডোর - হ্যাঁ, আপনাকে লোডের উপর চিত্রগুলি সন্ধান করতে হবে এবং প্রতিটিটির সাথে সাধারণ ফাংশন সংযুক্ত করতে হবে। এটি সম্পাদন করার জন্য আপনি jQuery বা ভ্যানিলা জেএস ব্যবহার করতে পারেন (আমি আমার উত্তরটি উদাহরণ দিয়ে আপডেট করেছি)

— কেভিন জাঞ্জজার

রিঅ্যাক্টজেগুলিতে এটি করা খুব সহজ, একই নীতি সেখানে প্রয়োগ হয়। এই টিউটোরিয়ালটি এখানে পেয়েছে - youtu.be/90P1_xCaim4 । চিত্রের জন্য একটি প্রিলোডার ( youtu.be/GBHBjv6xfY4 ) যুক্ত করা উত্তরণটিকে আড়াল করে এবং একটি ভাল ইউএক্স সরবরাহ করতে সহায়তা করে।

— প্রেম

Answer 2

লোকেরা এখানে যা বলছে তা সত্ত্বেও আপনার জাভাস্ক্রিপ্টের মোটেই দরকার নেই, আপনার সিএসএসেরও দরকার নেই !!

এটি কেবলমাত্র HTML এর সাথে খুব ডাবল এবং সহজ। এমনকি কোনও চিত্র লোড না হলে আপনি একটি ডিফল্ট চিত্রও প্রদর্শন করতে পারেন । এখানে ...

এটি সমস্ত ব্রাউজারগুলিতেও কাজ করে, এমনকি আইই 8 হিসাবে অনেক পিছনে (সেপ্টেম্বর ২০১৫-তে আমি হোস্ট করা সাইটগুলিতে 250,000++ দর্শকের মধ্যে, জিরো লোকেরা IE8 এর চেয়েও খারাপ কিছু ব্যবহার করেছিল, যার অর্থ এই সমাধানটি আক্ষরিকভাবে সমস্ত কিছুর জন্য কাজ করে )।

ধাপ 1: একটি হিসাবে ইমেজ রেফারেন্স বস্তু একটি পরিবর্তে চিত্র । যখন বস্তুগুলি ব্যর্থ হয় তারা ভাঙা আইকন প্রদর্শন করে না; তারা শুধু কিছুই না। আইই 8 দিয়ে শুরু করে আপনি অবজেক্ট এবং ইমজি ট্যাগগুলি আন্তঃবিন্যভাবে ব্যবহার করতে পারেন। আপনি নিয়মিত চিত্রগুলির সাথেও আপনি যা যা করতে পারেন সেই সমস্ত গৌরবময় জিনিস আপনি পুনরায় আকার দিতে এবং করতে পারেন। অবজেক্ট ট্যাগ থেকে ভয় পাবেন না; এটি কেবল একটি ট্যাগ, বড় এবং ভারী কিছুই বোঝা যায় না এবং এটি কোনও কিছুই ধীর করে না। আপনি কেবল অন্য নামে ইমগ ট্যাগটি ব্যবহার করবেন। একটি গতি পরীক্ষা দেখায় যে তারা অভিন্নভাবে ব্যবহৃত হয়।

পদক্ষেপ 2: (ptionচ্ছিক, তবে দুর্দান্ত) সেই বস্তুর ভিতরে একটি ডিফল্ট চিত্র আঁকুন । আপনি চাইলে চিত্রটি বস্তুটিতে আসলে লোড হয় , ডিফল্ট চিত্রটি প্রদর্শিত হবে না। সুতরাং উদাহরণস্বরূপ আপনি ব্যবহারকারীর অবতারগুলির একটি তালিকা প্রদর্শন করতে পারেন, এবং যদি কারও কাছে এখনও সার্ভারে একটি চিত্র না থাকে তবে এটি স্থানধারক চিত্রটি দেখাতে পারে ... জাভাস্ক্রিপ্ট বা সিএসএসের প্রয়োজন নেই, তবে আপনি কীসের বৈশিষ্ট্যগুলি পেয়েছেন বেশিরভাগ লোক জাভাস্ক্রিপ্ট নেয়।

কোডটি এখানে ...

<object data="avatar.jpg" type="image/jpg">
    <img src="default.jpg" />
</object>

... হ্যাঁ, এটা সহজ।

আপনি যদি সিএসএসের মাধ্যমে ডিফল্ট চিত্রগুলি বাস্তবায়ন করতে চান তবে আপনি নিজের HTML এটিকে আরও সহজ করে তুলতে পারেন ...

<object class="avatar" data="user21.jpg" type="image/jpg"></object>

... এবং কেবল এই উত্তরটি থেকে CSS যুক্ত করুন -> https://stackoverflow.com/a/32928240/3196360

Comments

কোনওভাবেই আমি এই ধারণাটি পুরোপুরি মিস করেছি, যখন এটি পূর্ববর্তী ক্ষেত্রে স্পষ্টতই প্রকাশিত হয়! দুর্ভাগ্যক্রমে, আমি মনে করি না যে অবজেক্ট ট্যাগটি img.srcset প্রপার্টিটিতে আমরা দেখতে শুরু করেছি এর মতো প্রতিক্রিয়াশীল চিত্রগুলি কৃপণভাবে পরিচালনা করতে পারে :(

— উইন্ডগ্যাজার

দুর্দান্ত ধারণা, এর জন্য আপনাকে ধন্যবাদ! একদিকে নোটে, অবজেক্ট-ট্যাগটি স্ক্রোল হুইলটি ব্লক করছে (আমার বাস্তবায়নে, কমপক্ষে) ... যদি এটি আপনার হয়ে থাকে তবে কেবল object { pointer-events: none; }আপনার

— সিএসএসে

যদিও ইমেজ ট্যাগগুলির শব্দার্থক শব্দগুলি ভঙ্গ করে। আমি জানি না যে সার্চ ইঞ্জিনগুলি <object>ট্যাগগুলির পরিবর্তে আপনার ট্যাগ ব্যবহার পছন্দ করবে <img>। এই পদ্ধতিরটি কি এইচটিএমএল 5- সম্মতিযুক্ত এবং সমস্ত বড় ব্রাউজার দ্বারা সঠিকভাবে রেন্ডার করা হয়েছে?

— পিটার

এটি এইচটিএমএল 4 কমপ্লায়েন্ট (1997 সাল থেকে অনুগত) এবং আইই 8 / ২০০৯ সাল থেকে সমস্ত বড় ব্রাউজার সঠিকভাবে রেন্ডার করেছে (অন্যান্য ব্রাউজারগুলি এটি অনেক আগে করেছিল)) যদি কোনও সার্চ ইঞ্জিন কোনও চিত্রের ধরণের কোনও বিষয়টিকে একটি চিত্র হিসাবে বুঝতে না পারে, তবে এটি সম্ভবত খুব ভাল ইঞ্জিন নয়, অনুমান করাতে 19 বছর সময় লেগেছে ... রাস্তায় গাড়ি চালানো কিশোরীরা এখন ছিল না এমনকি যখন কল্পনা করা হয়েছিল যে এই সমাধানটি চশমাগুলি পূরণ করেছে ... আপনি কতদূর যেতে চান? :) এটি একটি শিলা-কঠিন সমাধান।

— নিক স্টিল

@ মনস্টার এমএমওরপিজি কারণ এটি জাভাস্ক্রিপ্ট ব্যবহার করে না, এবং আপনাকে সর্বদা অনুমতি দেওয়া হয় না (উদাহরণস্বরূপ কোনও ইমেল বার্তার মূল অংশে)।

— ই

Answer 3

Https://bitofco.de/styling-broken-images/ এ দুর্দান্ত সমাধান খুঁজে পেয়েছে

img {  
  position: relative;
}

/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {  
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  content: attr(alt);
}

<img src="error">
<br>
<img src="broken" alt="A broken image">
<br>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">

Comments

নির্ভুল সমাধান সিএসএস ব্যবহার করে যা গ্রহণযোগ্য উত্তর হওয়া উচিত। ব্রাউজার সমর্থন হিসাবে এখন 97,87%: লিঙ্কযুক্ত নিবন্ধটি পুরানো, ক্যানিউজ :: #feat=css-gencontent ।

— holm50

লিঙ্ক নিবন্ধ কিভাবে ব্রাউজার ইমেজ হ্যান্ডেল কিন্তু এই সমাধান কাজ করে শুধুমাত্র যদি আপনি একটি কঠিন পটভূমি আছে মনে রাখা উপর একটি চমৎকার ব্যাখ্যা এবং আপনি চান অন্য বক্স সঙ্গে সবকিছু কভার একই কঠিন রং এর, বা অন্য ইমেজের সাথে। এই সমাধানটি আসলে ভাঙা চিত্রের আইকনটি সরিয়ে বা লুকিয়ে রাখছে না, এটি কেবল এটি coveringেকে দিচ্ছে।

— ক্লাদিও ফ্লোরানি

ক্রোম 70 এ, এটি পাখিটি + একটি ভাঙা চিত্রের আইকনটি দেখায় :(

— সাইমন আর্নল্ড

— Firef

@ ডাইলেস্লিজে - ফায়ারফক্স +৪++ এ এটি সরানো হয়েছে img[alt]::before। আপনি display:inline-blockযদি পছন্দ করেন তবে এটি ব্যবহার করতে পারেন, কারণ এটি আসলটির কাছাকাছি।

— অ্যাডাম কাটজ

Answer 4

আপনি যদি Alt = "abc" পাঠ্য সহ Alt যোগ করেন তবে এটি শোটি দুর্নীতিগ্রস্থ থাম্বনেইল এবং Alt বার্তা abc প্রদর্শন করবে

<img src="pic_trulli.jpg" alt="abc"/>

আপনি যদি Alt যোগ না করেন এটি শো দুর্নীতিগ্রস্থ থাম্বনেইল প্রদর্শন করবে

<img src="pic_trulli.jpg"/>

আপনি যদি ভাঙাটি গোপন করতে চান তবে কেবল Alt = "" যুক্ত করুন এটি দুর্নীতিগ্রস্থ থাম্বনেইল এবং কোনও Alt বার্তা প্রদর্শন করবে না (জেএস ব্যবহার না করে)

<img src="pic_trulli.jpg" alt=""/>

আপনি যদি ভাঙ্গাটি গোপন করতে চান তবে কেবল alt = "" & onerror = "this.style.display = 'কিছুই নয়" "যুক্ত করুন এটি ক্ষতিকারক থাম্বনেইল এবং কোনও Alt বার্তা প্রদর্শন করবে না (জেএস সহ)

<img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>

চতুর্থটি কিছুটা বিপজ্জনক (ঠিক ঠিক নয়), আপনি যদি অনিরর ইভেন্টে কোনও চিত্র যুক্ত করতে চান তবে চিত্রটি স্টাইল হিসাবে উপস্থিত থাকলেও এটি প্রদর্শিত হবে না is ডিসপ্লে যোগ করার মতো। সুতরাং, যখন আপনার প্রদর্শনের জন্য কোনও বিকল্প চিত্রের প্রয়োজন হবে না তখন এটি ব্যবহার করুন।

display: 'none'; // in css

যদি আমরা এটি সিএসএসে দিই, তবে আইটেমটি প্রদর্শিত হবে না (যেমন চিত্র, আইফ্রেমে, ডিভের মতো)।

আপনি যদি চিত্রটি প্রদর্শন করতে চান এবং ত্রুটি হলে আপনি সম্পূর্ণ ফাঁকা জায়গা প্রদর্শন করতে চান তবে আপনি ব্যবহার করতে পারেন তবে সতর্কতা অবলম্বন করুন এটি কোনও স্থান গ্রহণ করবে না। সুতরাং, আপনার এটি একটি ডিভে থাকতে পারে

লিঙ্ক https://jsfiddle.net/02d9yshw/

Comments

হ্যাঁ! শুধু যোগ করুন alt=""! আক্ষরিকভাবে এটি! ধন্যবাদ. আমি খুশি হয়ে আমি পৃষ্ঠার নীচে স্ক্রোল করেছি। আমি অলস লোডিং, এবং ইন-ফ্রেম চিত্রগুলি ব্যবহার করছি যা এখনও লোড হয়নি (কারণ ব্রাউজারটি ভুল করে ভিউপপোর্টটি এখনও তাদের কাছে স্ক্রোল করেনি) ভাঙ্গা চিত্র হিসাবে দেখায়। একটি ছোট স্ক্রোল, এবং তারা আবার প্রদর্শিত হবে। তাদের জায়গায় ভাঙা চিত্রগুলি এতটাই কুৎসিত ছিল

— ভেলকুন

Answer 5

আমি মনে করি সবচেয়ে সহজ উপায় হ'ল পাঠ্য-ইনডেন্ট সম্পত্তি দ্বারা ভাঙা চিত্র আইকনটি লুকানো।

img {
    text-indent: -10000px
}

অবশ্যই আপনি "Alt" বৈশিষ্ট্যটি দেখতে চাইলে এটি কাজ করে না।

Comments

সহজতম পথ.

— থাইরাসান টনথংকম

Answer 6

আমি পছন্দ উত্তর দ্বারা নিক এবং এই সমাধান সঙ্গে প্রায় খেলে গেল। একটি ক্লিনার পদ্ধতি পেয়েছে। যেহেতু :: এর আগে / :: সিউডোগুলি img এবং অবজেক্টের মতো প্রতিস্থাপিত উপাদানগুলিতে কাজ না করে তারা কেবল তখনই কাজ করবে যখন অবজেক্ট ডেটা (src) লোড না করা হয়। এটি এইচটিএমএলকে আরও পরিষ্কার রাখে এবং কেবলমাত্র বস্তুটি লোড করতে ব্যর্থ হলে এটি ছদ্ম যুক্ত করবে।

object {
  position: relative;
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  border: 1px solid black;
}
object::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: red url("http://placehold.it/200x200");
}

<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>

<object data="http://broken.img/url" type="image/png"></object>

Answer 7

আপনি যদি স্থানধারক হিসাবে চিত্রটি রাখতে / প্রয়োজন রাখতে চান তবে চিত্রের আকার নির্ধারণের জন্য আপনি একটি অনাররর এবং কিছু সিএসএসের সাহায্যে অস্বচ্ছতা 0তে পরিবর্তন করতে পারেন। এইভাবে আপনি ভাঙা লিঙ্কটি দেখতে পাবেন না, তবে পৃষ্ঠাটি সাধারণ হিসাবে লোড হবে।

<img src="<your-image-link->" onerror="this.style.opacity='0'" />

img {
    width: 75px;
    height: 100px;
}

Answer 8

আপনার যদি ইমেজ ধারকটি পরে ভরাট হওয়ার কারণে দৃশ্যমান হওয়া দরকার এবং এটি প্রদর্শন এবং আড়াল করে বিরক্ত করতে চান না তবে আপনি এসআরসিটির অভ্যন্তরে 1x1 স্বচ্ছ চিত্রটি আটকে রাখতে পারেন:

<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

আমি এই সঠিক উদ্দেশ্যে এটি ব্যবহার করেছি। আমার একটি ইমেজ ধারক ছিল যা এজ্যাক্সের মাধ্যমে এটিতে একটি চিত্র লোড করতে চলেছে। চিত্রটি বড় ছিল এবং লোড হতে কিছুটা সময় নিয়েছে বলে এটি একটি জিআইএফ লোডিং বারের সিএসএসে একটি পটভূমি-চিত্র সেট করা দরকার।

তবে, এর এসসিআর খালি থাকার কারণে ভাঙ্গা চিত্রের আইকনটি এটি ব্যবহার করা ব্রাউজারগুলিতে এখনও উপস্থিত হয়েছিল।

স্বচ্ছ 1x1 জিআইফ সেট করে সিএসএস বা জাভাস্ক্রিপ্টের মাধ্যমে কোনও কোড সংযোজন না করে এই সমস্যাটি সহজ এবং কার্যকরভাবে সমাধান করে।

Comments

কেবলমাত্র

— উত্তরটিই

Answer 9

কেবল CSS ব্যবহার করা শক্ত, তবে আপনি ট্যাগগুলির background-imageপরিবর্তে সিএসএস ব্যবহার করতে পারেন <img>...

এটার মতো কিছু:

এইচটিএমএল

<div id="image"></div>

সিএসএস

#image {
    background-image: url(Error.src);
    width: //width of image;
    height: //height of image;

}

এখানে একটি কার্যকরী ফিজল ।

দ্রষ্টব্য: আমি চিত্রটি কোথায় হবে তা প্রদর্শনের জন্য কেবল সিঁড়িতে সিএসএসে সীমানা যুক্ত করেছি।

Comments

এটি ভাল, তবে এই সমাধানটি আমার পক্ষে নয় :) img ট্যাগটি

— লুকানো থাকলে এসসিআর

@ জিরাউইনোভ এর পরে আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করতে হতে পারে

— ড্রায়ডেন লং

Answer 10

অবজেক্ট ট্যাগ ব্যবহার করুন। এই জাতীয় ট্যাগের মধ্যে বিকল্প পাঠ্য যোগ করুন:

<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>

http://www.w3schools.com/tags/tag_object.asp

Answer 11

২০০৫ সাল থেকে , ফায়ারফক্সের মতো মোজিলা ব্রাউজারগুলি এই স্ট্যান্ডার্ডটিকে :-moz-brokenঅনুরোধটি সম্পাদন করতে পারে এমন স্ট্যান্ডার্ড সিএসএস সিউডো-ক্লাসকে সমর্থন করেছে :

td {
  min-width:64px; /* for display purposes so you can see the empty cell */
}

img[alt]:-moz-broken {
  display:none;
}

<table border="1"><tr><td>
  <img src="error">
</td><td>
  <img src="broken" alt="A broken image">
</td><td>
  <img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png"
       alt="A bird" style="width: 120px">
</td></tr></table>

img[alt]::beforeফায়ারফক্স in৪ এও কাজ করে (যদিও এটি একসময় এমন ছিল img[alt]::afterতাই এটি নির্ভরযোগ্য নয়)। আমি তাদের মধ্যে ক্রোম 71-এ কাজ করতে পারি না।

Comments

আকর্ষণীয় ... আপনি কি জানেন যে ক্রোমের একটি অনুরূপ সিউডো-শ্রেণি রয়েছে?

— 1000 জিবিপিএস

@ 1000 জিবিপিএস - আমি যখন উত্তরটি দিয়েছিলাম তখন একটি খুঁজে পেলাম না এবং কমপক্ষে দ্রুত ওয়েব অনুসন্ধানের সাথে এবং মোজিলা বাগ 11011 দেখে এখনই একটি খুঁজে পাচ্ছি না । আপনি চাইলে আপনি ক্রোমিয়ামে (ক্রোমের জন্য প্রবাহিত) প্রকৃত পক্ষে অনুরোধ করতে পারেন, তবে এটি যেহেতু মানসম্পন্ন নয়, তাই তারা এটি করবে বলে কোনও নিশ্চয়তা নেই।

— অ্যাডাম কাটজ

আমি খুব সন্দেহ করি যে তারা খুব অল্প সময়ের মধ্যেই এটি করবে, এই বিষয়টি বিবেচনা করে যে আমি সেখানে রিপোর্ট করেছি এমন কিছু কদর্য বাগের সাথে তাদের খুব কঠিন সময় কাটাচ্ছিল ... এই বিষয়টির মতো অন্তর্নির্মিত সিউডো-ক্লাসগুলি মুছে ফেলা হবে এ বিষয়টি মোটেই গুরুত্বপূর্ণ নয় matter ফ্রেমওয়ার্কগুলি একই কারণে

— অনেকগুলি

Answer 12

আপনি এই পথটিকে CSS সমাধান হিসাবে অনুসরণ করতে পারেন

img {
        width:200px;
        height:200px;
        position:relative
   }
img:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: inherit;
        height: inherit;
        background: #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder') no-repeat center;
        color: transparent;
    }

<img src="gdfgd.jpg">

Comments

প্রথমে আমি ভাবছিলাম যে এটি একটি দুর্দান্ত সমাধান তবে এটি IE নিয়ে কাজ করছে না। সিএসএস

— সময়ও নয়

Answer 13

অনুপস্থিত চিত্রগুলি হয় কেবল কিছুই প্রদর্শন করবে না, বা একটি [প্রদর্শন করবে? ] স্টাইল বাক্স যখন তাদের উত্সটি খুঁজে পাওয়া যায় না। পরিবর্তে আপনি এটিকে একটি "অনুপস্থিত চিত্র" গ্রাফিক দিয়ে প্রতিস্থাপন করতে চাইতে পারেন যে আপনি নিশ্চিত আছেন যে কিছু ভুল আছে এর থেকে আরও ভাল ভিজ্যুয়াল প্রতিক্রিয়া রয়েছে। অথবা, আপনি এটি পুরোপুরি আড়াল করতে চাইবেন। এটি সম্ভব, কারণ যে চিত্রগুলি ব্রাউজারটি "ত্রুটি" জাভাস্ক্রিপ্ট ইভেন্টের জন্য আমরা দেখতে পারি তাতে আগুন পেতে পারে না।

    //Replace source
    $('img').error(function(){
            $(this).attr('src', 'missing.png');
    });

   //Or, hide them
   $("img").error(function(){
           $(this).hide();
   });

অতিরিক্তভাবে, আপনি যখন কোনও সাইট অ্যাডমিনকে ইমেল প্রেরণ করতে চান তখন কোনও ধরণের অ্যাজাক্স অ্যাকশনটি ট্রিগার করতে পারেন।

Answer 14

কৌশলটি img::afterএকটি ভাল স্টাফ, তবে কমপক্ষে 2 টি ডাউনসাইড রয়েছে:

1. সমস্ত ব্রাউজার দ্বারা সমর্থিত নয় (যেমন এজ https://codepen.io/dsheiko/pen/VgYErm এ কাজ করে না )
2. আপনি কেবল চিত্রটি আড়াল করতে পারবেন না, আপনি এটি coverেকে রাখবেন - সুতরাং যখন আপনি কোনও ক্ষেত্রে কোনও ডিফল্ট চিত্র প্রদর্শন করবেন তখন সেই সহায়ক নয়

আমি জাভাস্ক্রিপ্ট ছাড়া সার্বজনীন সমাধান জানি না, তবে ফায়ারফক্সের জন্য কেবল একটি দুর্দান্ত সমাধান রয়েছে:

img:-moz-broken{
  opacity: 0;
}

Answer 15

কোনও কোডের প্রয়োজন ছাড়াই এটি করার একটি প্রাথমিক এবং খুব সহজ উপায় হ'ল কেবল একটি খালি এলটি স্টেটমেন্ট সরবরাহ করা। এরপরে ব্রাউজারটি খালি হিসাবে ছবিটি ফিরিয়ে দেবে। চিত্রটি না থাকলে দেখতে এটি দেখতে ঠিক এমনই হবে।

উদাহরণ:

<img class="img_gal" alt="" src="awesome.jpg">

এটি দেখতে চেষ্টা করুন! ;)

Comments

এটি ব্রাউজারের উপর নির্ভর করে। ক্রোমে আপনার এখনও ইমেজ বর্ডার এবং ভাঙা চিত্র আইকনটি (এখানে খালি) ওয়েল পাঠ্য ছাড়াও থাকবে।

— পানজি

চিত্রটি যদি আলংকারিক এবং সামগ্রীটির পক্ষে অপরিহার্য না হয় তবে একটি খালি এলইটি ঠিক আছে। আসলে এটি কোনও Alt এর চেয়ে বেশি বাঞ্ছনীয়। অন্যথায়, এটি অত্যন্ত অগ্রহণযোগ্য। একটি ভাঙা চিত্র এমন একটি চিত্র যা দেখা যায় না, তবে এটির একটি Alt ট্যাগ থাকলে এটি কমপক্ষে শোনা যায়। আপনি যদি Alt ট্যাগটি সরিয়ে নেন তবে এটি ওআর শোনা যাবে না।

— জেপি ডিভ্রিজ

@ পাঞ্জি আমি সমাধানটি পরীক্ষা করেছি এবং দেখে মনে হচ্ছে ক্রোম তার আচরণ পরিবর্তন করেছে। এটি যদি ভাঙা চিত্রের আইকনটি রেন্ডার করে না alt=""। ফায়ারফক্সের ক্ষেত্রেও একই রকম।

— ফিলিপ Mitterer

Answer 16

ভবিষ্যতের গুগলদের জন্য, ২০১৪ সালে অ্যাট্রিবিউট সিলেক্টর ব্যবহার করে খালি চিত্রগুলি গোপন করার ব্রাউজারের নিরাপদ খাঁটি সিএসএস উপায় রয়েছে:

img[src="Error.src"] {
    display: none;
}

সম্পাদনা: আমি ফিরে এসেছি - ভবিষ্যতের গুগলদের জন্য, 2019 সালে শ্যাডো ডোমে প্রকৃত Alt পাঠ্য এবং Alt পাঠ্য চিত্রটি স্টাইল করার একটি উপায় রয়েছে তবে এটি কেবল বিকাশকারী সরঞ্জামগুলিতে কাজ করে। সুতরাং আপনি এটি ব্যবহার করতে পারবেন না। দুঃখিত। এটা খুব সুন্দর হবে।

#alttext-container {
    opacity: 0;
}
#alttext-image {
    opacity: 0;
}
#alttext {
    opacity: 0;
}

Comments

img[src=''] { display: none; } এটি ইবে এইচটিএমএল কেবলমাত্র টেম্পলেটগুলির সাথে আবার প্রাসঙ্গিক হয়ে উঠেছে

— imos