未在Vue.js中加载本地图像

我有一个新的

vue

站点，它是使用

vue cli

构建的，但是我的映像根本不会加载，也不知道为什么

 <router-link class="logo" to="/" tag="img" src="@/assets/logo.png" style="cursor: pointer"/>

控制台

---

据我所知，

没有

src

属性：

带有vue的cli映像被视为模块，因此您应该导入或要求它们：

 <router-link :src="require(@/assets/logo.png)" style="cursor: pointer" class="logo" to="/" tag="img" />

---

当您将Vue与Webpack一起使用时（几乎总是），它用于编译

.Vue

文件。在编译文件的

部分时，它会在Webpack模块请求中查找一些常见的标记，如

标记

因此，您的
在编译时（本质上）转换为

有关默认情况下转换的标记/属性组合，请参见上面的链接。如果不存在您需要的组合（如您的情况），您可以像许多流行的UI库那样配置Vue loader（）（例如Vuetify，用于它的
v-img
组件），或者您必须按照@Boussadjra Brahim的建议手动配置（缺少引号）：


路由器链接

呈现为

HTML

img

，因此

src

的有效性取决于：有时我们希望呈现为另一个标记，例如

。然后我们可以使用tag prop来指定要呈现给哪个标记，它仍然会侦听用于导航的click事件重要的是，

router link

没有

src

prop：因为它自己不知道

src

prop，所以它将按原样传递值。Vue并不是到处查看所有属性，看它们是否像应该重写的路径。

 <router-link :src="require(@/assets/logo.png)" style="cursor: pointer" class="logo" to="/" tag="img" />