使用 Vue 和 Webpack 动态加载图像的问题答案

【问题标题】：Problem loading an image dynamically with Vue & Webpack使用 Vue 和 Webpack 动态加载图像的问题
【发布时间】：2020-03-20 18:49:25
【问题描述】：

我开始使用 Vue CLI 构建一个应用程序，并且我在一个组件中有以下代码 sn-p：

<template>
  <div v-loading="loading">
    <el-carousel :interval="4000" type="card" height="350px">
      <el-carousel-item v-for="element in persons" :key="element.id">
            <div class="testimonial-persons">
                <el-avatar :size="80">
                    <img :src="require('@assets/testimonial/'+ element.photo)"> 
                </el-avatar>
                <h3>{{element.name}}</h3>
                <h4>{{element.occupation}}</h4>
                <hr style="width:50%;">
                <p>"{{element.comment}}"</p>
            </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

页面加载后，我请求一个 API，该 API 返回我存储在 persons 中的对象数组以迭代模板。

人员

[ 
    { 
        "testimonial_id": "2",
        "persons_id": "1",
        "id": "1", 
        "name": "Tom lima", 
        "occupation": "CEO / Pugmania",
        "comment": "Simply the best customer service and attention to detail.",
        "photo": "20200320193143R7pChVea3IkmujRRmS.png" 
    },

]

一切正常，问题在于图片加载。

当我手动输入图像名称时，它可以工作。

  <img src="@assets/testimonial/20200320193143R7pChVea3IkmujRRmS.png">

有人知道怎么解决吗？

【问题讨论】：

标签： javascript vue.js webpack vuejs2 vue-cli

【解决方案1】：

您的模板是正确的，只是在@ 后面缺少/。应该是：

<img :src="require('@/assets/testimonial/' + element.photo)">

手动使用也需要这个，所以当你将它转换为动态路径时可能会忽略它。

【讨论】：

这是一个非常令人困惑的自定义 Webpack 别名，更不用说，因为 Vue-CLI 使用 @ 作为默认的 src 别名。所以这意味着您不必要地创建了第一个别名，@ 别名，因为它已经存在。最后，错误信息表明Webpack在使用require时无法识别你的@assets别名。我不会在任何自定义别名中使用@ 以避免混淆。
此外，通过在 Vue-CLI 的 src 资产之外使用自定义资产文件夹，您会绕过并错过 Vue 的资产捆绑便利。我想问题是你为什么要这样做？我建议将您的资产移至 src/assets，删除您的自定义别名，并使用我的答案语法。
完美@Dan 谢谢！我会听从你的建议！是我对 vue 比较陌生，而且我还没有设法吸收所有文档和最佳实践......我正在使用 codeigniter 和 jquery 迁移一个项目，我试图重用我已经拥有的结构资产所以我做了这个别名:)再次感谢o/
不客气，这是一个很好的努力。让我知道您是否有任何问题或它是否解决了您的问题。此外，如果您的assets 实际上像您的src 一样位于根目录中（我知道您说过它在它上面），那么这个别名就可以工作：'@assets': path.resolve(__dirname, 'assets/uploads/')。（但不要这样做。）
我明白了。前端源文件夹并不适合这种情况。我认为最好简单地创建：<img :src="'http://<myserver>/<path>/' + element.photo" />