কোনও এইচটিএমএল <img> এর src বৈশিষ্ট্য বৈধ না হলে কোনও ডিফল্ট চিত্র ইনপুট করা হয়?

268

এইচটিএমএল <img>ট্যাগে ডিফল্ট চিত্র রেন্ডার করার কোনও উপায় আছে , যদি srcবৈশিষ্ট্যটি অবৈধ (কেবলমাত্র এইচটিএমএল ব্যবহার করে) অবৈধ হয়? যদি তা না হয় তবে আপনার চারপাশে কাজ করার হালকা ওজন কী হবে?

html  image 
— Galilyou
সূত্র
3
এইচটিএমএল ভাঙা ইমেজ জন্য কোন ফ্যালব্যাক নেই। ভাঙা চিত্রগুলি খুঁজে পেতে এবং তাদের এসসিআর বৈশিষ্ট্যটি পরিবর্তন করতে আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে।
— Blixt
2
@ ব্লাস্ট - যদি আপনার ক্লায়েন্টটি এমএস আউটলুক বা অন্য কোনও ইমেল পাঠক হয় এবং আপনার জাভাস্ক্রিপ্ট না থাকে এবং অবজেক্ট বিকল্পটি কার্যকর হয় না ... আমি অনুমান করি যে কেবলমাত্র সমাধানটি হল / টেক্সট
— Xofo

উত্তর:

319

আপনি কেবল এইচটিএমএল সমাধানের জন্য বলেছেন ...

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>
  <title>Object Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

  <p>
    <object data="http://stackoverflow.com/does-not-exist.png" type="image/png">
      <img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such">
    </object>
  </p>

</body>

</html>
স্নিপেট প্রসারিত করুন

যেহেতু প্রথম চিত্রটির অস্তিত্ব নেই, তাই ফলব্যাক (এই ওয়েব সাইটে ব্যবহৃত স্প্রাইটস *) প্রদর্শিত হবে। এবং যদি আপনি সত্যিই কোনও পুরানো ব্রাউজার ব্যবহার করেন যা সমর্থন করে না object, তবে এটি ট্যাগটিকে উপেক্ষা করবে এবং ট্যাগটি ব্যবহার করবে img। সামঞ্জস্যের জন্য ক্যানিউজ ওয়েবসাইট দেখুন । এই উপাদানটি আইআই 6 + এর সমস্ত ব্রাউজার দ্বারা ব্যাপকভাবে সমর্থিত।

* যদি না ইমেজটির URL টি (আবার) পরিবর্তন না করা হয়, সেক্ষেত্রে আপনি সম্ভবত Alt পাঠ্যটি দেখতে পাবেন।

— প্যাট্রিক ম্যাকএলহানি
সূত্র
3
আমি এইচটিএমএল 4.01 এর জন্য ডিটিডি রাখার পরে এটি আইই 8 তে আমার জন্য কাজ করেছিল।
— প্যাট্রিক ম্যাকলেহনে
যদি অ-বিদ্যমান চিত্রটি X-Frame-Optionsসেট করে দেয় SAMEORIGINবা আরও অনুমতিযুক্ত সেটিংস দেয় তবে এটি কাজ করে না ।
— আটটিলা ও।
এটি কাজ করে তবে অবজেক্ট.ডেটায় লিঙ্কটি যদি বিশ্বাসযোগ্য না হয় তবে এটি সমস্ত ধরণের জিনিসপত্র লোড করতে পারে ...
— মাইকেল_শার্ফ
1
এলিমেন্ট 'আইএমজি' উপাদান 'অবজেক্ট' এর ভিতরে নেস্ট করা যায় না।
— ম্যাথিউস মিরান্ডা
2
@ ম্যাথিউস নিশ্চিত যে এটা করতে পারে। এইচটিএমএল 4 অবজেক্টে প্রবাহের সামগ্রী থাকতে পারে (আইএমজি সহ প্রায় সব কিছু) এবং এইচটিএমএল 5 এ এটি স্বচ্ছ, যার অর্থ এটিতে কোনও বৈধ HTML5 থাকতে পারে।
— প্যাট্রিক ম্যাকএলহানি
318

এটি আমার পক্ষে ভাল কাজ করে। সম্ভবত আপনি ইভেন্টটি হুক করতে JQuery ব্যবহার করতে চান।

 <img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';">

জ্যাকর্যাগস ত্রুটি গার্ডের সাথে আপডেট হয়েছে

আপডেট হয়েছে: সিএসএসের একমাত্র সমাধান আমি সম্প্রতি ভিটালি ফ্রিডম্যান ডেমোকে দেখেছি একটি দুর্দান্ত সিএসএস সমাধান সম্পর্কে আমি অবগত ছিল না। ভাবটি হ'ল contentভাঙা চিত্রটিতে সম্পত্তি প্রয়োগ করা । সাধারণত :afterবা :beforeচিত্রগুলিতে প্রয়োগ হয় না তবে সেগুলি ভেঙে গেলে সেগুলি প্রয়োগ করা হয়।

<img src="nothere.jpg">
<style>
img:before {
    content: ' ';
    display: block;
    position: absolute;
    height: 50px;
    width: 50px;
    background-image: url(ishere.jpg);
</style>

ডেমো: https://jsfiddle.net/uz2gmh2k/2/

ফিডল দেখায়, ভাঙা চিত্রটি নিজেই সরানো হবে না, তবে এটি সম্ভবত কোনও জেএস বা সিএসএসের গাব ছাড়াই বেশিরভাগ ক্ষেত্রে সমস্যার সমাধান করবে। আপনার যদি বিভিন্ন স্থানে বিভিন্ন চিত্র প্রয়োগ করতে হয় তবে কেবল একটি শ্রেণীর সাথে পার্থক্য করুন:.my-special-case img:before { ...

— Svend
সূত্র
3
আমার মতে. এটি আরও ভাল উত্তর। এখানে কোয়ার্কস্মোডগুলি অনারার নিয়েছে ..... আমার কাছে বেশ নিরাপদ বলে মনে হচ্ছে। quirksmode.org/dom/events/error.html#t01
— n0nag0n
12
বিটিডাব্লু, যদি ত্রুটি.জেপিজি বিদ্যমান না থাকে, এটি একটি অসীম লুপের কারণ কারণ এটি চিত্রটি সন্ধান করার চেষ্টা করে চলেছে, তারপরে অনারর আবার বলা হয়, এটি এটি খুঁজে পায় না এবং পুরো জিনিসটি আবার শুরু হয়।
— বোরক
30
অসীম লুপের ঝুঁকি এড়াতে, কেবল একটি পরীক্ষা যুক্ত করুন: <img src = "foo.jpg" onerror = "if (this.src! = 'Error.jog') this.src = 'error.jpg';">
— জ্যাকেগার
21
বিকল্পভাবে, আপনি লিখতে পারেন:onerror="this.src='error.jpg';this.onerror='';"
— ডিলিলসন সা মায়া
6
এই যেখানে jQuery হয়?
— প্রবীণ কুমার পুরুষোথমন
64

স্প্রিশ ইন অ্যাকশন 3 য় এডিতে এই সমাধানটি পেয়েছেন।

<img src="../resources/images/Image1.jpg" onerror="this.src='../resources/images/none.jpg'" />

আপডেট: এটি কেবলমাত্র এইচটিএমএল সমাধান নয় ... onerrorএটি জাভাস্ক্রিপ্ট

— অমিত বকলে
সূত্র
3
এটি দুর্দান্ত কাজ করে। ইমগুরে ফ্যালব্যাক চিত্র সহ এখানে একটি আপডেট রয়েছে: <img src = "a-گمমান-চিত্র.jpg" Alt = "" ওনারর = "this.src = 'http: ///i.imgur.com/hfM1J8s.png' ">
— আরপো
15 

<img style="background-image: url(image1), url(image2);"></img>
স্নিপেট প্রসারিত করুন

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

— এমিলিয়ানো বারবোজা
সূত্র
— ডকস / ওয়েবে / সিএসএস/…
ইমেজ 1 সম্পূর্ণরূপে অস্বচ্ছ হলে এটি কাজ করে। যদি এটির স্বচ্ছতা থাকে, যেমন বেশিরভাগ আইকন চিত্রগুলি করে, তবে ইমেজ 2 প্রদর্শিত হবে।
— jdunning
14 
<style type="text/css">
img {
   background-image: url('/images/default.png')
}
</style>

চিত্রের মাত্রা প্রবেশ করানো নিশ্চিত করুন এবং আপনি চিত্রটি টাইল করতে চান কিনা তা নিশ্চিত হন।

— lambacck
সূত্র
28
চিত্রটি পাওয়া না গেলে বেশিরভাগ ব্রাউজার কোনও 'ভাঙা লিঙ্ক' চিত্রটি দেখায় না ... সেক্ষেত্রে, ব্যাকগ্রাউন্ড সেট করা সমস্যার সমাধান করবে না।
— জাস্টিন ডি
13

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

fixBrokenImages = function( url ){
    var img = document.getElementsByTagName('img');
    var i=0, l=img.length;
    for(;i<l;i++){
        var t = img[i];
        if(t.naturalWidth === 0){
            //this image is broken
            t.src = url;
        }
    }
}

এটি এর মতো ব্যবহার করুন:

 window.onload = function() {
    fixBrokenImages('example.com/image.png');
 }

ক্রোম এবং ফায়ারফক্সে পরীক্ষিত

— পিম জাগার
সূত্র
2
এটি পিম কাজ করছে, এবং এটি সম্পূর্ণ পুনরায় ব্যবহারযোগ্য, তবে আমি এই ক্ষেত্রে হালকা ওজনের বিকল্পটি পছন্দ করব। অনেক অনেক ধন্যবাদ :) +1
— গ্যালিলিও
আপনি আমার সমস্ত জীবন বাঁচিয়েছেন স্যার।
— দাড়িদার
12

আপনি যদি কৌনিক / jQuery ব্যবহার করেন তবে এটি সাহায্য করতে পারে ...

<img ng-src="{{item.url}}" altSrc="{{item.alt_url}}" onerror="this.src = $(this).attr('altSrc')">

ব্যাখ্যা

ধরে নিলে এর এমন itemকোনও সম্পত্তি রয়েছে urlযা নাল হতে পারে, যখন তখন এটি চিত্রটি ভাঙ্গা হিসাবে প্রদর্শিত হবে। যা onerrorউপরে বর্ণিত হিসাবে অ্যাট্রিবিউট এক্সপ্রেশন কার্যকর করার জন্য ট্রিগার করে । srcউপরে বর্ণিত হিসাবে আপনাকে এট্রিবিউটটি ওভাররাইড করতে হবে তবে আপনার altSrc অ্যাক্সেস করার জন্য আপনার jQuery এর প্রয়োজন হবে। এটি ভ্যানিলা জাভাস্ক্রিপ্টের সাথে কাজ করতে পারেনি।

কিছুটা হ্যাকি মনে হতে পারে তবে আমার প্রকল্পের দিনটি বাঁচিয়েছে।

— ওবি
সূত্র
11

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

<picture>
    <source id="s1" srcset="image1_not_supported_by_browser.webp" type="image/webp">
    <source id="s2" srcset="image2_broken_link.png" type="image/png">
    <img src="image3_fallback.jpg" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;">
</picture>
— bapho
সূত্র
এই এক মহান! নিখোঁজ ব্রাউজার সমর্থন caniuse.com/#feat=picture সম্পর্কে সচেতন হন । আইই 11 এর মতো আপনাকে যদি পুরানো ব্রাউজারগুলি সমর্থন করতে হয় তবে কোনও পলিফিল বা অন্য কোনও সমাধান ব্যবহার করে বিবেচনা করুন।
— হিনরিচ
7

angular2: 

<img src="{{foo.url}}" onerror="this.src='path/to/altimg.png'">
— user3601578
সূত্র
1
এটি কাজ করতে পারে বলে আমি মনে করি না যে এটি কোনও নতুন তথ্য যুক্ত করে। ওনাররর অংশটি কেবল ভ্যানিলা জাভাস্ক্রিপ্ট এবং এসআরসি বাইন্ডিংটি ইতিমধ্যে কৌণিক ব্যবহারকারীদের দ্বারা জানা উচিত
— চিক
7

কিছু ভাল উত্তর এবং মন্তব্য জড়িত সহজ এবং ঝরঝরে সমাধান।

<img src="foo.jpg" onerror="this.src='error.jpg';this.onerror='';">

এমনকি এটি অসীম লুপ ঝুঁকি সমাধান করে।

আমার জন্য কাজ করেছেন।

— মনীষ কুমার
সূত্র
আইএমও, এটি অবশ্যই মার্জিত দেখাচ্ছে না।
— স্ক্রিপ্ট 47
1
@ স্ক্রিপ্ট 47 এটি ঝরঝরে, আমি ঝরঝরে পুনরাবৃত্তি করছি
— মনীষ কুমার
1
না, আমি এটি পরিষ্কারও বলব না। এটি সম্ভবত অন্যান্য সমাধানগুলির মধ্যে একটি পুনঃস্থাপন বলে উল্লেখ করবেন না।
— স্ক্রিপ্ট 47
একটি যাদুমন্ত্র মত কাজ করে! ধন্যবাদ!
— গোহাইব্রিড
1
Lifesaver হয়। আমি মার্জিত চাই না, আমি সহজ এবং কাজ চাই। ধন্যবাদ!
— কিট
7

এইচটিএমএল কেবলমাত্র একটি সমাধান, যেখানে কেবলমাত্র প্রয়োজন হ'ল আপনি যে চিত্রটি সন্নিবেশ করছেন সেটির আকারটি আপনার জানা উচিত । স্বচ্ছ চিত্রগুলির জন্য কাজ করবে না, কারণ এটি background-imageফিলার হিসাবে ব্যবহার করে ।

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

img {
  background-image: url("http://placehold.it/200x200");
  overflow: hidden;
}

img:before {
  content: " ";
  font-size: 1000px;
}
This image is missing:
<img src="a.jpg" style="width: 200px; height: 200px"/><br/>
And is displaying the placeholder
স্নিপেট প্রসারিত করুন

একটি CSS কেবল সমাধান (কেবল ওয়েবকিট)

img:before {
  content: " ";
  font-size: 1000px;
  background-image: url("http://placehold.it/200x200");
  display: block;
  width: 200px;
  height: 200px;
  position: relative;
  z-index: 0;
  margin-bottom: -16px;
}
This image is there:
<img src="http://placehold.it/100x100"/><br/>

This image is missing:
<img src="a.jpg"/><br/>
And is displaying the placeholder
স্নিপেট প্রসারিত করুন

— eithed
সূত্র
4

আপনার পৃষ্ঠাটি দেখার চেষ্টা করবে এমন অসংখ্য ক্লায়েন্ট (ব্রাউজার) এর সংখ্যা নিশ্চিত করার কোনও উপায় নেই। বিবেচনা করার একটি দিক হ'ল ইমেইল ক্লায়েন্টগুলি ডিফাক্টো ওয়েব ব্রাউজার এবং এটি ট্রিকামাজিকারি হ্যান্ডেল করতে পারে না ...

এর মতো আপনার যেমন একটি পছন্দসই প্রস্থ এবং উচ্চতা সহ একটি Alt / পাঠ্য অন্তর্ভুক্ত করা উচিত। এটি একটি খাঁটি এইচটিএমএল সমাধান।

alt="NO IMAGE" width="800" height="350"

সুতরাং অন্যান্য ভাল উত্তর নীচে সামান্য পরিবর্তন করা হবে:

<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="NO IMAGE" width="800" height="350">

আমার ক্রোমে অবজেক্ট ট্যাগ নিয়ে সমস্যা ছিল তবে আমি ভাবতে পারি এটি এটির ক্ষেত্রেও প্রযোজ্য।

আপনি আরও বড় হতে Alt / পাঠ্য আরও স্টাইল করতে পারেন ...

সুতরাং আমার উত্তরটি জাভাস্ক্রিপ্টকে একটি দুর্দান্ত Alt / পাঠ্য ফালব্যাক সহ ব্যবহার করুন use

আমি এটি আকর্ষণীয়ও পেয়েছি: কোনও চিত্রের Alt বৈশিষ্ট্যটি কীভাবে স্টাইল করা যায়

— Xofo
সূত্র
3

সঙ্গে একটি modulable সংস্করণ JQuery , আপনার ফাইলের শেষে এই যোগ করুন:

<script>
    $(function() {
        $('img[data-src-error]').error(function() {
            var o = $(this);
            var errorSrc = o.attr('data-src-error');

            if (o.attr('src') != errorSrc) {
                o.attr('src', errorSrc);
            }
        });
    });
</script>

এবং আপনার imgট্যাগে:

<img src="..." data-src-error="..." />
— কেভিন রোবটেল
সূত্র
3

উপরের সমাধানটি অসম্পূর্ণ , এটি গুণটি মিস করেছে src।

this.srcএবং this.attribute('src')একই নয়, উদাহরণস্বরূপ http://my.host/error.jpg, প্রথমটিতে চিত্রটির সম্পূর্ণ রেফারেন্স রয়েছে তবে বৈশিষ্ট্যটি মূল মানটি রাখে,error.jpg

সঠিক সমাধান

<img src="foo.jpg" onerror="if (this.src != 'error.jpg' && this.attribute('src') != 'error.jpg') this.src = 'error.jpg';" />
— SEB
সূত্র
3
এই কোডটি ব্যবহার করার সময়, আমি Uncaught TypeError: this.attribute is not a functionক্রোম 43-এ দেখি
— জন ওয়াশাম
আপনি কি jQuery ব্যবহার করছেন?
— মিশ্র
onError কে বিকাশকারী হিসাবে অনুযায়ী অবহিত করা হয়েছে।
— মোজিলা.আর.এন
2

আপনি যদি কৌনিক 1.x ব্যবহার করে থাকেন তবে আপনি এমন একটি নির্দেশিকা অন্তর্ভুক্ত করতে পারেন যা আপনাকে কোনও সংখ্যক চিত্রের ফলব্যাক করতে দেয়। ফলব্যাক বৈশিষ্ট্যটি একটি একক url, অ্যারের ভিতরে একাধিক url, বা স্কোপ ডেটা ব্যবহার করে একটি কৌণিক অভিব্যক্তি সমর্থন করে:

<img ng-src="myFirstImage.png" fallback="'fallback1.png'" />
<img ng-src="myFirstImage.png" fallback="['fallback1.png', 'fallback2.png']" />
<img ng-src="myFirstImage.png" fallback="myData.arrayOfImagesToFallbackTo" />

আপনার কৌণিক অ্যাপ্লিকেশন মডিউলে একটি নতুন ফ্যালব্যাক নির্দেশ যুক্ত করুন:

angular.module('app.services', [])
    .directive('fallback', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var errorCount = 0;

                // Hook the image element error event
                angular.element(element).bind('error', function (err) {
                    var expressionFunc = $parse(attrs.fallback),
                        expressionResult,
                        imageUrl;

                    expressionResult = expressionFunc(scope);

                    if (typeof expressionResult === 'string') {
                        // The expression result is a string, use it as a url
                        imageUrl = expressionResult;
                    } else if (typeof expressionResult === 'object' && expressionResult instanceof Array) {
                        // The expression result is an array, grab an item from the array
                        // and use that as the image url
                        imageUrl = expressionResult[errorCount];
                    }

                    // Increment the error count so we can keep track
                    // of how many images we have tried
                    errorCount++;
                    angular.element(element).attr('src', imageUrl);
                });
            }
        };
    }])
— রব ইভান্স
সূত্র
দুর্দান্ত ধারণা! অ্যারে অফ
— ফ্যালব্যাক
1

আমাকে সম্প্রতি একটি ফ্যালব্যাক সিস্টেম তৈরি করতে হয়েছিল যার মধ্যে বেশ কয়েকটি সংখ্যক ফ্যালব্যাক চিত্র অন্তর্ভুক্ত ছিল। আমি এখানে একটি সাধারণ জাভাস্ক্রিপ্ট ফাংশনটি ব্যবহার করে কীভাবে করেছি।

এইচটিএমএল

<img src="some_image.tiff"
    onerror="fallBackImg(this);"
    data-fallIndex="1"
    data-fallback1="some_image.png"
    data-fallback2="some_image.jpg">

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

function fallBackImg(elem){
    elem.onerror = null;
    let index = +elem.dataset.fallIndex;
    elem.src = elem.dataset[`fallback${index}`];
    index++;
    elem.dataset.fallbackindex = index;
}

আমি মনে করি এটি অনেকগুলি ফ্যালব্যাক চিত্রগুলি পরিচালনা করার জন্য বেশ হালকা ওজনের উপায়।

— Rager
সূত্র
— মোজিলা.অর্গ
0

জ্যাকুরি ব্যবহার করে আপনি এরকম কিছু করতে পারেন:

$(document).ready(function() {
    if ($("img").attr("src") != null)
    {
       if ($("img").attr("src").toString() == "")
       {
            $("img").attr("src", "images/default.jpg");
       }
    }
    else
    {
        $("img").attr("src", "images/default.jpg");
    }
});
— জন
সূত্র
0

যে কোনও চিত্রের জন্য, এই জাভাস্ক্রিপ্ট কোডটি ব্যবহার করুন:

if (ptImage.naturalWidth == 0)
    ptImage.src = '../../../../icons/blank.png';

কোথায় ptImageএকটি <img>ট্যাগ ঠিকানা প্রাপ্ত document.getElementById()।

— জোসে এস্তেভেস পেরেইরা
সূত্র
0

গুগল "ইমেজ ফ্যালব্যাক এইচটিএমএল" কীওয়ার্ডগুলিতে এই পৃষ্ঠাটি ছুঁড়েছে, তবে উপরেরটি আমাকে সাহায্য না করায় এবং আমি "9 এর নীচে IE এর জন্য এসভিজি ফ্যালব্যাক সমর্থন" খুঁজছিলাম, আমি অনুসন্ধান চালিয়ে যাচ্ছি এবং এটিই আমি খুঁজে পেয়েছি: 

<img src="base-image.svg" alt="picture" />
<!--[if (lte IE 8)|(!IE)]><image src="fallback-image.png" alt="picture" /><![endif]-->

এটি অফ-টপিক হতে পারে তবে এটি আমার নিজের সমস্যার সমাধান করেছে এবং এটি অন্য কাউকেও সহায়তা করতে পারে।

— স্যান্ডর জুবোলি
সূত্র
0

প্যাট্রিকের উজ্জ্বল উত্তর ছাড়াও , আপনারা যারা ক্রস-প্ল্যাটফর্ম কৌণিক জেএস সমাধান সন্ধান করছেন, আপনি এখানে যান:

<object type="image/png" data-ng-attr-data="{{ url || 'data:' }}">
    <!-- any html as a fallback -->
</object>

আমি এখানে সঠিক সমাধান সন্ধান করার চেষ্টা করছিলাম এমন একটি প্লঙ্ক রয়েছে: http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p= পূর্বরূপ

— sunsay
সূত্র
0

আপনি যদি গতিশীল ওয়েব প্রকল্প তৈরি করে থাকেন এবং প্রয়োজনীয় চিত্রটি ওয়েবকন্টে স্থাপন করেছেন তবে আপনি স্প্রিং এমভিসিতে নীচে উল্লিখিত কোড ব্যবহার করে চিত্রটি অ্যাক্সেস করতে পারবেন:

<img src="Refresh.png" alt="Refresh" height="50" width="50">

আপনি ইমগ নামের ফোল্ডারটি তৈরি করতে পারেন এবং চিত্রটি ইমগ ফোল্ডারের ভিতরে রাখতে পারেন এবং সেই ইমগ ফোল্ডারটি ওয়েবকন্টের ভিতরে রাখতে পারেন তবে নীচের বর্ণিত কোডটি ব্যবহার করে আপনি চিত্রটি অ্যাক্সেস করতে পারবেন:

<img src="img/Refresh.png" alt="Refresh" height="50" width="50">
— যোশিতা মহাজন
সূত্র
-2

আমরা হব!! আমি এই উপায়ে সুবিধাজনক পেয়েছি, চিত্রটির উচ্চতা বৈশিষ্ট্যটি 0 হতে হবে কিনা তা যাচাই করুন, তারপরে আপনি ডিফল্ট চিত্রের সাথে src বৈশিষ্ট্যটি ওভাররাইট করতে পারেন: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/ ভাবমূর্তি

 image.setAttribute('src','../icons/<some_image>.png');
  //check the height attribute.. if image is available then by default it will 
  //be 100 else 0
  if(image.height == 0){                                       
       image.setAttribute('src','../icons/default.png');
  }
— সুহাইল
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.