Image src attribute causes a 404 before the compilation
See original GitHub issueHello,
with a template like this:
<img src="{{image}} />
and javascript:
var vue = new Vue({
el: '#view',
data: {
image: 'http://somehost.com/image.jpg'
}
});
gives the error:
GET http://myhost.com/%7B%7Bthumb%7D%7D 404 (Not Found)
The Angular team had some issue with it, which resulted in the ngSrc directive.
NB: The same problem might happen with the href
attribute, see ngHref as well.
Edit: Here comes the JSFiddle.
Issue Analytics
- State:
- Created 10 years ago
- Reactions:1
- Comments:18 (2 by maintainers)
Top Results From Across the Web
Error 404 on img src can't replace image - vanilla JS
The API returns a value for serials.Poster meaning the if statement always sets imgSrc to serials.Poster . The 404 message means the image...
Read more >Show a default image if image is not found using JavaScript
If you set the image's src attribute to a non-existent image, it would re-trigger the error event, causing an infinite loop.
Read more >Troubleshoot content issues - HubSpot Knowledge Base
Published content is displaying a 404 error. When no live page exists at the URL entered in the browser's address bar, the browser...
Read more >onerror Event - W3Schools
The onerror event is triggered if an error occurs while loading an external file (e.g. a document or an image). Tip: When used...
Read more >Static files in ASP.NET Core | Microsoft Learn
Run();. UseDefaultFiles must be called before UseStaticFiles to serve the default file. UseDefaultFiles is a URL rewriter that doesn' ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
You can use
v-attr="src: image"
in this situation@dickyeka the v-bind:src (or :src) evaluates an expression, you would need the following:
<img :src="'img/category/'+c.image" />