带有v-bind的img src不显示图像

img src with v-bind not displaying image

我正在尝试使用 v-bind 显示动态图像,但它不起作用 在模板标签中:

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

在脚本标签中:

  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'
          };

我厌倦了在 img 标签上使用测试路径来检查路径是否有问题,但它工作正常。 我该如何解决这个问题

v-bind:src 按预期工作。问题是您的路径在您的网页上下文中没有意义。

要将项目路径转换为 ​​Web 路径,请使用 vue-loader。即:

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

或者您可以利用现有的 transform rules

注意: 这可能因配置而异,但在标准 Vue 项目中,将 ~/assets 替换为 @/assets 应该可以解决问题,而无需require().