使用 Vue 和 Webpack 动态加载图像时出现问题

Question

我开始使用 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>

加载页面时，我请求 API returns 我存储在 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">

Does anyone have any idea how to solve?

Answer 1

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

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

这对于手动使用也是需要的，所以当您将它转换为动态路径时，您可能遗漏了它。

使用 Vue 和 Webpack 动态加载图像时出现问题

Problem loading an image dynamically with Vue & Webpack

javascript

webpack

vue.js

vuejs2

vue-cli