CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Sanjar Barakayev
Sanjar Barakayev

Reputation: 109

Vuetify. v-img component doesn't display

This is a piece of code that doesn't work. the picture is not displayed. I checked the path to the picture everything is ok. I don't understand what the problem is. Everything is clear in the console.

<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>

Thank you in advance.

Upvotes: 1

Views: 2049

Answers (2)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37753

Change your code to:

<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>

See this part of VueCLI documentation for more details how static assets are handled by Vue CLI/Webpack. This works automatically when you reference it directly (<img src='../assets/img.png') because Webpack is configured to look for specific tags/attributes (like img/src). But you have file paths as a data in JS, so you must use require function directly - it will be transformed by Webpack during build into correct URL/path....

Upvotes: 1

Ali SaZa
Ali SaZa

Reputation: 95

hi you must use require like this:

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

Upvotes: 2

Related Questions