fix(runtime-dom): <img width height> should be set as attribute

[zh-lx]

fix #7658

When height and width of some embedded element such as <img>、<video>、<source> and <canvas> are string type, they will be rendered as 0. And they are rendered normally when they are number type. This is because of the height and width of these elements must be set as attribute when they are string type.

So in patchProp they should be modified by patchAttr instead of patchDOMProp.

[LinusBorg]

Thanks for this PR, but the current behavior is just what the browser does according to the spec. We should not do any special handling here, the developer should provide the value in the correct type.

[Justineo]

Current behavior for CSR and SSR is different. And under certain optimization in CSR the behavior is also different. I think this is a bug and should be fixed.

[LinusBorg]

Different how? Is there an issue for that problem with SSR?

[zh-lx]

Different how? Is there an issue for that problem with SSR?

Yes, you can enable SSR in this demo:
https://sfc.vuejs.org/#__SSR__eNp9UEFOwzAQ/MriSy91nLYUQRQq8Q9fnHSTGGrHrJ22UpW/s2kqQCD1ZM/OeHY8F/EWQnYcUBSijDXZkCBiGsJOe+tCTwkuQNjACA31DhYsXWivfalmNesYJHThYBIyAii71c66tlR8XvGDlHCy+9QVsMrBRvA9OXMA4/fQoW2ZWD+G88SY6sZJOb9lI4hUv2rRpRRiodQJq2Dqj+w9Zj21yta9l/FzMIQy8stD9rytzNMmr5u83jbrF4Mb3GTx2Goxp2CvVZ4zmnZ3aYbhzAPFO0v1/RmxFHMH0pnA+3rPLV2mWPpGRC0KuE6mGXcz4Z+osamnbm9J+ZbR4JN1mGF0sqL+FJHYWIvlLw/FwyOSJPR7JKR7nn+k/3wn21H7UYxfk2Wlug==

When in SSR, the height of <img> will be 100px; and when in CSR, it will be 0.

[zh-lx]

Thanks for this PR, but the current behavior is just what the browser does according to the spec. We should not do any special handling here, the developer should provide the value in the correct type.

Although the description of width of <img> on MDN must be a integer, it can also be a string type when used in html.I think the description on mdn is not necessarily accurate, and we should be more consistent with the actual use of html.

Here is an example to prove my point:

The attribute of <input> in mdn also has width and height and their description is consistent with that of <img>. But in fact, the width of input can only be changed through style. Neither setAttribute nor prop can change its width, even if its value is a integer. The following is the example about <input >:

https://sfc.vuejs.org/#eNp9j71Ow0AMx1/FeAlITa4MLFVaiY03YPFSEqdJlfuQ75IOUd4dX4oQAonN/w//ZC/4GkI1T4wHrGMjQ0gQOU3hRG6wwUuCBYQ7WKETb6HQakGOXONdTGDjBY45fyzeeBw9vHsZ24fiiVxt7jgFqUhsw3hOrAqg7p9Py7Itr2ttVG3u4MKUYC6tb3k8EmpOCLehTb2ql/2eUIu1+WbhDu83lvYcqmv0Tr9YMou+gkh4gM3Jnt6eNWGfUogHY2LX5N+vsfJyMTpVMrk0WK442vJD/C2yKJhw94Nh1JxZSmHXsrD8x/xV/cPN2JXciusn32yHkA==