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

【问题标题】：Local images are not loading In Vue.js本地图像未在 Vue.js 中加载
【发布时间】：2020-09-18 13:58:07
【问题描述】：

我有一个新的 vue 网站，它是使用 vue-cli 构建的，但我的图片根本无法加载，也不知道原因

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

我将image 保存在assets 文件夹中

控制台

但是如果我使用下面的它确实会显示

<img src="@/assets/logo.png" />

控制台

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

使用 vue cli 图像被视为模块，因此您应该导入或要求它们：

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

【讨论】：

【解决方案2】：

据我所知，<router-link> 没有 src 属性：https://router.vuejs.org/api/#router-link-props

【讨论】：

router-link 呈现为 HTML img 所以src 是有效的
根据this：有时我们希望呈现为另一个标签，例如
。然后我们可以使用 tag prop 指定渲染到哪个标签上，它仍然会监听点击事件进行导航

重要的是router-link 没有src 属性：因为它本身不知道src 属性，它会按原样传递值。 Vue 不会到处查看所有属性，看看它们是否看起来像应该重写的路径。

【解决方案3】：

当您将 Vue 与 Webpack 一起使用时（几乎总是），Vue-loader 用于编译您的 .vue 文件。在编译文件的<template> 部分时，它会查找一些常见的标签，例如<img>，并能够将transform 的src 标签内容放入Webpack 模块请求中

所以您的<img src="@/assets/logo.png" /> 在编译时（基本上）转换为<img :src="require('@/assets/logo.png')" />

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

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

【讨论】：