Vue.js - vue-cli-service 服务 - img src 没有从对象正确加载

Question

我一直在查看以下问题，但在从对象设置 src 时无法正确加载图像。

How to use img src in vue.js?

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

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

1. 安装 Vue CLI（如果尚未安装）

   npm install --global @vue/cli

2. 创建一个新项目，然后选择“手动选择功能”选项

   vue 创建我的项目名称

我选择为这个项目添加所有功能：

运行此代码时，我可以看到硬编码src 的图像，但看不到从对象加载的动态:src。这可能是由于 Babel 或 CSS-Pre-processor 造成的吗？我选择使用Sass/SCSS (with 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 serve 的开发服务器，如README.md 文件和文档中所述。这会从package.json 调用脚本vue-cli-service serve。

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

README.md：

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

Answer 1

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

当您在模板部分添加src 时，它会被解析，最后它将被包裹在require 周围。

您需要将require 添加到您的路径中。