CODEWITHSUNDEEP
htmldata-bindingknockout.jsw3c-validation
john Smith
john Smith

Reputation: 17906

Invalid HTML (img: 'src' must be non-empty) when using "attr-binding" with knockout.js

I love knockout.js and I use is very often.

But when I use the "attr-binding" for an img’s src or alt attribute, like 

data-bind="attr: { src: photo.src, alt: 'description'}"

The W3C-validator says that’s invalid HTML:

Bad value for attribute src on element img: Must be non-empty.

And they are right, because the attributes are empty until the model was bound and executed.

Is there any other workaround than providing a link to a wrong image? Or in other words, is it a real problem somebody has been facing before?

Upvotes: 0

Views: 1430

Answers (2)

Nowres Rafed
Nowres Rafed

Reputation: 1138

You can try

<img src="#" alt="" data-bind="attr: { src: photo.src, alt: 'description'}" />

Upvotes: 1

PW Kad
PW Kad

Reputation: 14995

You can always use this - 

data-bind="attr: { src: photo.src || 'default.jpg' }"

Fiddle example - http://jsfiddle.net/jAYPL/

Upvotes: 0

Related Questions