为什么Vue的img标签src属性仅:src绑定生效，{{url}}插值写法不生效？

问题根因 #

Vue 模板语法中，{{ }} 插值语法仅适用于标签的文本内容渲染，不支持直接写在 HTML 标签的属性值内。你查阅的文档提到的{{ }}写法，均指向标签内部文本的渲染场景，HTML 属性绑定必须使用v-bind:指令（可简写为:）。

• 你使用的<img src="{{ url }}">属于错误用法，Vue 不会对属性值内的{{ }}做插值解析，因此会原样输出到最终渲染的 HTML 中，自然无法读取到url变量的实际值。
• 你最初的写法<img :src="url" alt="user profile image" />才是属性绑定的标准正确写法，:是v-bind:的语法简写，作用是告知 Vue 将引号内的内容作为动态表达式解析，绑定到对应的属性上。

用法对比参考 #

<!-- 正确用法：属性绑定用v-bind/简写: -->
<img :src="url" alt="用户头像">
<!-- 正确用法：标签文本内容用{{}}插值 -->
<p>当前头像地址：{{ url }}</p>

<!-- 错误用法：属性值内不能使用{{}}插值 -->
<img src="{{ url }}" alt="用户头像">

内容的提问来源于stack exchange，提问作者John Smith