Vue.js img标签无法显示图片：绑定正确却不渲染的问题

核心问题：重复ID导致Vue未处理img标签 #

HTML中ID必须是唯一的，你同时给<div>和<img>设置了id="app"，Vue的mount('#app')只会挂载到第一个匹配的元素（也就是那个div），所以img标签不在Vue的管理范围内，:src这个Vue响应式绑定指令根本不会被解析，自然无法渲染图片。

次要风险：混合内容限制 #

你的图片URL使用http协议，如果页面是通过https打开的，浏览器会因为混合内容安全策略阻止加载http资源，不过这是解决ID问题之后需要注意的点。

修正后的代码 #

<html>
<head>
  <title>Split VueJS Demo</title>
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
  </script>

  <script type="module">
    import { createApp } from 'vue'
    createApp({
      data() {
        return {
          image: 'http://www.cortazar-split.com/dog_origin.jpeg'
        }
      }
    }).mount('#app'); 
  </script>
</head>
<body> 
  <div id="app">
    <div>{{ image }}</div>
    <img :src="image" alt="Dog"/>
  </div>
</body>
</html>

修正说明 #

• 将img标签移到id="app"的div内部，让Vue能处理它的:src绑定
• 移除重复的id="app"，保证ID唯一性
• 给img添加alt属性，符合HTML规范

内容的提问来源于stack exchange，提问作者David Martin