Vue.js-Vue cli服务-img src未从对象正确加载

Question

我一直在看下面的问题，但我不能让图像加载正确时设置src从一个对象。

如何在vue.js?中使用img src

我使用以下指南使用TypeScript创建了一个新的Vue项目：

https://vuejs.org/v2/guide/typescript.html

>

安装Vue CLI，如果尚未安装

npm安装--global@vue/cli

创建一个新项目，然后选择“手动选择要素”选项

vue创建我的项目名称

我选择为此项目添加每个功能：

运行此代码时，我可以看到硬编码的src的图像，但不能看到从对象加载的动态： src。这可能是由于巴别塔或CSS预处理器？我选择使用Sass/SCSS（带dart-sass）作为CSS预处理器。

<template>
    <div>
        <img class="center" :src="test.imageSrc" alt="image" />
        <img class="center" :src="test.imageSrcLocalFolder" alt="image" />
        <img class="center" src="./a1-1.png" alt="image" />
        <img class="center" src="../assets/a1-1.png" alt="image" />
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';

    @Component
    export default class HelloWorld extends Vue {
        private test = {
            imageSrc: '../assets/a1-1.png',
            imageSrcLocalFolder: './a1-1.png',
        }

    }
</script>

检查元素如下所示：

我启动运行npm run service的dev服务器，如README. md文件和留档中所述。这将调用脚本vue-cli-servicefrompackage.json。

https://cli.vuejs.org/guide/cli-service.html

README.md：

### Compiles and hot-reloads for development
```
npm run serve
```

Answer 1

当您想要使用资产时，您需要使用require，以便将路径解析为运行时可访问的路径。

当您在模板部分中添加src时，它将被解析，最后它将被包装在require中。

您需要添加要求到您的路径。