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

Question

我开始使用Vue CLI构建应用程序，并且在组件中具有以下代码段：

template<> std::pair<const uint8_t*, size_t> get_resource<SOME_TYPE>()
{
    return {reinterpret_cast<const uint8_t*>("whatever"), 9ull};
}

template std::pair<const uint8_t*, size_t> get_resource<SOME_TYPE>();

页面加载后，我请求一个API，该API返回一个存储在<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> 中的对象数组，以遍历模板。

人员

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" 
    },

]

有人知道如何解决吗？

Answer 1

您的模板是正确的，除了您在/之后遗漏了@。应该是：

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

这对于手动使用也是必需的，因此也许在将其转换为动态路径时将其遗漏了。