Why is the image not being displayed when using VUE.JS?

Question

Vue.js

I am using vue cli. The task is to display an image whose file name is specified in the data properties of the component.

data: function () {
    return {
      result: {
        price: '',
        show: false,
        title: '',
        img: 'schiedel-uni-two-pipe.jpg'
      }
        
    }
  },

In the component template for displaying an image

<div class="uni_result-wrap-img">
  <img v-bind:src="'./../assets/img/' + result.img" v-bind:alt="'Комплект ' + result.title" class="uni_result-img">
</div>

However, as a result, the image is not displayed in the browser.

At the same time, it is clear in the browser console that the path to the file is correct.

If this path is written in the code directly, without using VUE.JS, the image is displayed.
What could be causing this problem? How to solve the problem?

Answer 1

<img :src="imgUrl" :alt="imgAlt" class="uni_result-img">

computed: {
  imgUrl() {
    return require(`@/assets/img/${this.result.img}`)
  },
  imgAlt() {
    return `Комплект ${this.result.title}`)
  }
}