【问题标题】: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】:

      据我所知,&lt;router-link&gt; 没有 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 文件。在编译文件的&lt;template&gt; 部分时,它会查找一些常见的标签,例如&lt;img&gt;,并能够将transformsrc 标签内容放入Webpack 模块请求中

      所以您的&lt;img src="@/assets/logo.png" /&gt; 在编译时(基本上)转换为&lt;img :src="require('@/assets/logo.png')" /&gt;

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

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

      【讨论】:

        猜你喜欢
        相关资源
        最近更新 更多
        热门标签