验证。 v-img 组件不显示答案

【问题标题】：Vuetify. v-img component doesn't display验证。 v-img 组件不显示
【发布时间】：2020-08-16 06:47:00
【问题描述】：

这是一段不起作用的代码。图片不显示。我检查了图片的路径一切正常。我不明白问题是什么。控制台中的一切都一目了然。

<v-card v-for="(course, i) in courses" :key="i">
  <v-img :src="course.src"></v-img>
    <v-card-subtitle>{{ course.title }}</v-card-subtitle>
    <v-card-actions>
      <v-progress-linear
        v-model="art"
        color="blue-grey"
        height="25"
        >
        <template v-slot="{ value }">
          <strong>{{ Math.ceil(value) }}%</strong>
        </template>
      </v-progress-linear>
    <span>
      <v-btn type="success">
        Davom ettirish
      </v-btn>
     </span>
   </v-card-actions>
</v-card>

<script>
  export default {
    data: () => ({
      courses: [
        {title: 'Rassomchilik', src: '../assets/images/course-maths.png'},
        {title: 'Matematikadan oliy ta`lim muassasalari uchun tayyorgarlik kursi', src: '../assets/images/course-maths.png'}
      ],
      art: 43,
    }),
  }
</script>

提前谢谢你。

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

你好，你必须像这样使用 require：

require('@/assets/images/course-maths.png')

【讨论】：

请告诉用户要替换代码中的哪一行。

【解决方案2】：

将您的代码更改为：

<script>
  export default {
    data: () => ({
      courses: [
        {title: 'Rassomchilik', src: require('../assets/images/course-maths.png')},
        {title: 'Matematikadan oliy ta`lim muassasalari uchun tayyorgarlik kursi', src: require('../assets/images/course-maths.png')}
      ],
      art: 43,
    }),
  }
</script>

请参阅 VueCLI 文档的this part，了解更多关于 Vue CLI/Webpack 如何处理静态资产的详细信息。当你直接引用它（<img src='../assets/img.png'）时，它会自动工作，因为 Webpack 被配置为查找特定的标签/属性（如img/src）。但是你有文件路径作为 JS 中的数据，所以你必须直接使用 require 函数 - 它会在构建过程中被 Webpack 转换为正确的 URL/路径....

【讨论】：

感谢您的回复。我明白了）