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

Posted 2023-02-23

【中文标题】Vue.js - vue-cli-service 服务 - img src 没有从对象正确加载

【英文标题】：Vue.js - vue-cli-service serve - img src not loading correctly from object

【发布时间】：2020-07-19 14:27:38

【问题描述】：

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

How to use img src in vue.js?

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

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

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

npm install --global @vue/cli

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

vue 创建我的项目名称

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

运行此代码时，我可以看到硬编码src 的图像，但看不到从对象加载的动态:src。这可能是由于 Babel 或 CSS-Pre-processor 造成的吗？我选择使用Sass/SCSS (with dart-sass) 作为 CSS 预处理器。

<template>
    <div>
        <img class="center" :src="test.imageSrc"  />
        <img class="center" :src="test.imageSrcLocalFolder"  />
        <img class="center" src="./a1-1.png"  />
        <img class="center" src="../assets/a1-1.png"  />
    </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
```

【问题讨论】：

你试过<img class="center" :src="require(test.imageSrcLocalFolder)" alt="image" />吗？

@BoussadjraBrahim 运行时错误：Error in render: "Error: Cannot find module './a1-1.png'"

你应该尊重相对路径

@BoussadjraBrahim 谢谢！

【参考方案1】：

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

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

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

【讨论】：

谢谢，使用private test = imageSrc: require('../assets/a1-1.png') 成功了！