2

I'm having problem with my view, it seems that the image is always pending and it's not been rendered by the browser.

I have this folder structure:

img/
 - logo.png
scripts/
 - scripts here
styles/
 - stylesheets here
views/
 - home.html
index.html

in my views/home.html I have this code to render the logo:

<img src="img/logo.png" alt="Note Card" class="img-responsive">

the view has been successfully rendered but the image is missing/not rendered. Based on my console it seems logo.png is always pending.

Any thoughts on how to make this work? I can't find any solutions.

Rene Padillo
  • 2,250
  • 4
  • 26
  • 39

3 Answers3

1

It seems it's my browser that's causing the trouble. I've tried doing Incognito mode, and the image got loaded.

tl;dr Delete the cache

Rene Padillo
  • 2,250
  • 4
  • 26
  • 39
  • I had the same behavior as you're describing - wouldn't load in normal Chrome tab, would load in Incognito. Restarting Chrome fixed it. – jmq Oct 30 '15 at 20:35
0

Have you tried changing src="img/logo.png" to src="/img/logo.png"? Not familiar with Angular but your code is referencing a img dir under views. Adding the leading slash will start it from your root.

joatis
  • 3,375
  • 1
  • 17
  • 13
  • It doesn't work, even with `../img/logo.png`. According from the docs the angular view is relative to the index.html, therefore I'll just have to use `img/logo.png`. But it's not working. The browser says that the image is "pending". I have tried checking the link and it points correctly to the file. – Rene Padillo Aug 13 '14 at 03:02
  • 1
    Do you have any AdBlock extensions, etc? It seems pending means that either there is a network problem or the image is being blocked: http://stackoverflow.com/questions/5585918/what-does-pending-mean-for-request-in-chrome-developer-window – joatis Aug 13 '14 at 03:15
  • 1
    Thanks! It seems it's my browser that's causing the trouble. I've tried doing Incognito mode, and the image got loaded. – Rene Padillo Aug 13 '14 at 04:15
0

Use ng-src attribute in the img tag..

html:

    <img ng-src={{imageUrl}} alt="Note Card" class="img-responsive">

controller:

    $scope.imageUrl="img/logo.png";

Check this document: Click here

parthicool05
  • 255
  • 1
  • 10