VueJs - 加载动态图像答案

【问题标题】：VueJs - loading dynamic imagesVueJs - 加载动态图像
【发布时间】：2019-01-27 11:24:07
【问题描述】：

这是我的代码，它尽可能具有魅力：

        <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"
        }
      ]
    };
  }
};

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

【问题讨论】：

你试过:src="require('../assets/' + icon.src)"吗？
@BoussadjraBrahim 是的，但仍然无法加载，在 :src="require('../assets/' + icon.src)" 之后，我将有一个这样的图像 URL：@ 987654321@。一切似乎都很好，但它不起作用
有一些错误？
一点也不，这取决于我的本地主机还是什么？当我使用静态
我有一个这样的 URL：data:image/svg+xml;base64,PHN2ZyB4 而不是 localhost:8080/assets/google.svg

【解决方案1】：

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

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

您可以做的是使用 webpack 导入文件，这将为您提供图像的 base64 表示并将其绑定到源，如下所示：

import Logo from '@/assets/logo.png'

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

然后像这样绑定它：

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

我已经制作了an example，以防万一。警告：对于大文件大小，这可能不是一个很好的解决方案。

【讨论】：