locked
Is there a way to prevent the error icon when binding to img src fails?

    Question

  • IE displays a little cross in a box for every img element that has no valid src. How can I prevent it from doing that or display another default icon at least?
    Wednesday, March 19, 2014 11:39 PM

All replies

  • Hi pkursawe,

    use alt attribute (http://www.w3schools.com/tags/att_img_alt.asp) or you can simply use following code if you need.

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

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, March 20, 2014 1:41 AM
    Moderator
  • Thanks, I tried that but since my img element is part of list item template user with WinJS.Binding it seems that if one item in the listview has an faulty img src all the img items are hidden?

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
            <div class="textItem">
              <img src="#" data-win-bind="src:carLogo" onerror="this.style.display='none'"/>
              <div class="detail">
                <h4 data-win-bind="textContent:name"></h4>
                <h6 data-win-bind="textContent:brandType"></h6>
              </div>
            </div>
          </div>

    edit: yes if i changed the onerror handler to "this.style.border='1px solud'", all items img have this border. So it seems that the onerror handlers "this" is not correctly rebound in the cloned template items?
    • Edited by pkursawe Thursday, March 20, 2014 10:20 PM
    Thursday, March 20, 2014 2:32 PM
  • Hi pkursawe,

    Theoretically speaking when the image onerror() event fires the style will be applied to current image object. I did some test with 1px solid border and works fine actually, I did not see something as you mentioned all the image have the border.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, March 21, 2014 7:56 AM
    Moderator
  • Oh, I know why you have the border, you set a src parameter as sharp(#) manually and ofcourse the system cannot find the correct image. let's remove it should be fine.

     <img src="#" data-win-bind="src:carLogo" onerror="this.style.display='none'"/>

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Friday, March 21, 2014 7:58 AM
    Moderator
  • Removin the src=# does indeed make the border style work, but not my initial idea, to hide the element. Setting onerror="this.display.style='none'" makes all items icons invisible.
    Friday, March 21, 2014 7:18 PM
  • Hi pkursawe,

    Nop, should not hide all the items.

    As you can see the screenshot below, only first item is invisible because the wrong image path. I hide it by set display as none.

    If you want, you can even replace another image with current one by using JavaScript to change the image src.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Monday, March 24, 2014 4:23 AM
    Moderator
  • Weird. In my code it does not work. What version of WinJS are you using? I am using Win 8.1 WinJS 2.0
    Thursday, March 27, 2014 10:55 PM
  • Yes, Win8.1 with VS 2013 Ultimate.

    Try again, if you need a sample I can give you one with what I've tested.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, April 04, 2014 8:23 AM
    Moderator
  • Yes, would be nice if you could provide OneDrive or similar share.
    Friday, April 04, 2014 10:00 AM
  • Hi i will upload the demo next Tuesday because I'm out of my computer.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Saturday, April 05, 2014 1:23 PM
    Moderator
  • It seems you are using the "HTML ListView essentials sample" and I tried to reproduce it. I changed the first line in data.js myData to an invalid picture:

    picture: "/images/_60Banana.png"

    all items have now no picture.

    edit: if I remove the src='#' then it works in the sample but still not in my app.

    edit2: I can see the reason for the failure in my app. Somebody creates a cached version of the template in "function code" 

    // generated template rendering function
    return function renderItem(itemPromise) {
    
    ...
    // HTML Processing
            var container = i5_document.createElement("DIV");
            var startIndex = 0;
            container.classList.add("win-template");
            var html = "\n\
          <div class=\"textItem\">\n\
            <img style=\"display: none;\" onerror=\"this.style.display='none'\" src=\"" + i16_htmlEscape(d0_carLogo) + "\">\n\
            <div class=\"detail\">\n\
              <h4>" + i16_htmlEscape(d1_name) + "</h4>\n\
              <h6>" + i16_htmlEscape(d2_brandType) + "</h6>\n\
            </div>\n\
          </div>\n\
        ";
            i12_insertAdjacentHTMLUnsafe(container, "beforeend", html);
    ...

    So there the wrong code is already in place. I have no idea when this caching of the template happens. It does *not* happen in the WinJS Sample code project!

    edit3: found out about data-win-options="{disableOptimizedProcessing: true} on the template, now Its not putting any more cached code into "Function Code" but it STILL does not work.  I give up.
    • Edited by pkursawe Saturday, April 05, 2014 10:46 PM
    Saturday, April 05, 2014 9:33 PM
  • Hi pkursawe,

    Yes, that is what I suppose to upload, the sample works fine.

    The question might be why someone create the cached version of template in your project? I don't think these code are added automatically by WinJS, right?

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, April 08, 2014 7:56 AM
    Moderator
  • The cached code is built by the WinJS 2.0 template engine. I prevented that by setting "{disableOptimizedProcessing: true}" on the template. But as written, the problem remains. Waiting for your example.
    Tuesday, April 08, 2014 2:35 PM