Javascript 使用Vue动态加载图像时出现问题&；网页包

我开始使用Vue CLI构建应用程序，组件中包含以下代码片段：

<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>

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

当我手动输入图像名称时，它会工作

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

有人知道怎么解决吗

---

您的模板是正确的，只是在

@

后面缺少一个

/

。应该是：

---

手动使用时也需要这样做，因此在将其转换为动态路径时，您可能忽略了它。

这是一个非常令人困惑的自定义网页别名，更不用说了，因为Vue CLI使用

@

作为默认

src

别名。因此，这意味着您不必要地创建了第一个别名，

@

别名，因为它已经存在。最后，错误消息表明，当使用

require

时，Webpack无法识别您的

@assets

别名。我不会在任何自定义别名中使用

@

，以避免混淆。此外，通过在Vue CLI的src资产之外使用自定义资产文件夹，您正在绕过并错过Vue的资产绑定便利。我想问题是你为什么这样做？我建议将您的资产移动到

src/assets

，删除您的自定义别名，并使用我的答案语法。完美@Dan谢谢！我会听从你的建议！我是vue的新手，还没有吸收所有的文档和最佳实践。。。我正在使用codeigniter和jquery迁移一个项目，我试图重用我已经拥有的资产结构，所以我使用了这个别名：）再次感谢您，不客气，这是一个很好的尝试。如果您有任何问题或它是否解决了您的问题，请告诉我。另外，如果您的

资产

实际上位于根目录中，就像您的

src

（我知道您说它在它上面），那么这个别名就可以工作了：

“@assets”：path.resolve（uu dirname，'assets/uploads/）

。（但不要这样做。）我明白了。前端源文件夹并不适合这种情况。我认为最好是简单地创建：

/'+element.photo/>

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