我也遇到过类似的问题。在一个有类似需求的项目中，我的工作是-也就是说，我有一个包含几十个对象的json文件，每个对象都有一个“url”键和图像文件名作为其值：

[
    {
        "id": 1,
        "img": "pic01.png",
        "metadata": "blah de blah"
    },
    {
        "id": 2,
        "img": "pic02.png",
        "metadata": "blah de blah"
    }, // etc.

...它位于'data'文件夹中，该文件夹是'src'目录的兄弟目录。包含图像的目录位于'static'目录（'src'目录的兄弟目录）中，并且在我的组件中：

import Gallery from '../../data/gallery.json';

export default {
    name: 'Gallery',
    data () {
        return {
            gallery: Gallery
            ...

...和模板：

<ul>
    <li v-for="obj in gallery" v-bind:key="obj.id">
        <a href="#" v-bind:title="obj.metadata">
            <img :src="'/static/gallery/'+obj.img" v-bind:alt="obj.metadata" v-bind:title="obj.metadata" />
        </a>
    </li>
</ul>

不知道这是否是最聪明的方法-也许有一个webpack配置可以简化这个，或者启用更多的选项来保存图像......但它对我有用，希望这对你也有用。祝你好运！