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

Question

我正在尝试使用 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 标签上使用测试路径来检查路径是否有问题，但它工作正常。我该如何解决这个问题

Answer 1

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

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

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

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

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