img width set to 0 when using vue 3 directly in thml without building
Sep 5th 2022
Vue version
3.2.38
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-mmhdhn?file=index.html
Steps to reproduce
<!doctype html>
<html>
<body>
<div id="app">
img:
<img src="http://zhye-prod.oss-cn-beijing.aliyuncs.com/car/87ac264f774448b2878277680d0d612d.jpg" width="200px" />
</div>
<script src="http://lzwlkj.cn:5000/static/vue%403.2.38.js"></script>
<script>
const { createApp } = Vue
createApp({
delimiters: ["[[", "]]"],
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
foo() {
console.log("foo")
}
}
}).mount('#app')
</script>
</body>
</html>
you will find the img's width is set to 0.
What is expected?
the img's width should not be set to 0
What is actually happening?
the final render code is:
<!doctype html>
<html>
<body>
<div id="app">
img:
<img src="http://zhye-prod.oss-cn-beijing.aliyuncs.com/car/87ac264f774448b2878277680d0d612d.jpg" width="0" />
</div>
<script src="http://lzwlkj.cn:5000/static/vue%403.2.38.js"></script>
<script>
const { createApp } = Vue
createApp({
delimiters: ["[[", "]]"],
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
foo() {
console.log("foo")
}
}
}).mount('#app')
</script>
</body>
</html>
System Info
windows edge latest
Any additional comments?
No response
Sep 5th 2022
Works fine outside of your repro: https://jsfiddle.net/7vo168gm/1/
Might be related to Vite's processing/parsing of index.html maybe because width & height cannot have units, they must be plain numbers.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img?retiredLocale=de#attributes