img src with v-bind not displaying image-CodePudding

I'm trying to display a dynamic image with v-bind and it s not working in template tag:

         <img v-bind:src="test" />

in script tag :

  data() {
    return {
      items: [],
      imagesref: "",
      test: '~/assets/captures/ref_01_03_2022_17_05_21/@DHRD-52484/user language check dates in different language/1.png'
          };

I tired to use the test path on an img tag to check if there's something wrong with the path but it worked fine. how can i fix this

CodePudding user response：

v-bind:src works as expected. The problem is your path makes no sense in the context of your web page.

To translate a project path into a web path, use vue-loader. Namely:

test: require('./relative/path/to/image.png')

Or you can make use of the existing transform rules.

Note: This might vary based on configuration, but in a standard Vue project, replacing ~/assets with @/assets should fix the problem, without needing require().