javascript - VueJs - 加载动态图像

Question

这是我的代码，它尽可能地发挥作用:

        <li class="icon-list">
          <img src="../assets/apple.svg" alt="apple" class="icons">
        </li>        
        <li class="icon-list">
          <img src="../assets/google.svg" alt="google" class="icons">
        </li>

我想用动态循环来做上面的事情。所以我使用了 v-for 并使用 :src 和 :alt 。

    <li v-for="icon in icons" class="icon-list">
      <img class="icons" :src="'../assets/' + icon.src" :alt="icon.alt">
    </li>


export default {
  name: "Home",

  data() {
    return {
      icons: [
        {          
          src: "google.svg",
          alt: "google"
        },
        {          
          src: "apple.svg",
          alt: "apple"
        }
      ]
    };
  }
};

但是它不加载任何图像。有什么建议吗？

Answer 1

据我所知，您想要实现的目标不可能像您想象的那样。 Vue 模板只能在运行时访问关联组件模型的属性。 但是，webpack 将首先在编译时捆绑所有资源，包括图像。

绑定(bind) :src="'../assets/' + icon.src" 时，应用程序将尝试相对于浏览器的 url 上下文查找它，这取决于您放置的位置您的文件和您使用的服务器可以在任何地方。

您可以做的是使用 webpack 导入文件，这将为您提供图像的 Base64 表示形式并将其绑定(bind)到源，如下所示:

从“@/assets/logo.png”导入 Logo

export default {
  name: "App",
  data() {
    return {
      sources: [Logo]
    }
  }
};

然后像这样绑定(bind)它:

<img v-for="(source, index) in sources" :key="index" width="25%" :src="source">

我做了an example ，以防有帮助。警告:对于大文件来说，这可能不是一个很好的解决方案。