构建中断图像链接

Question

我需要在构建我的应用程序后让我的图像链接正常工作。我如何制作 polymer build从 src 翻译图像路径目录到 build/bundled/src ？

我的文件结构开始看起来像这样:

my-app/
  index.html
  images/
    my-image.png
  src/
    my-element.html

我链接到 my-element 中的图像文件如下:

我的应用程序/src/my-element.html

<img src="../images/my-image.png">

图片看起来很棒。

为了构建我的应用程序，我运行以下命令:

polymer build

要查看我刚刚构建的内容，我运行:

polymer serve build/bundled

现在图像链接已损坏。所以我检查了 build/bundled 中的源代码目录并注意 <img src路径引用没有改变，也没有任何新的 images/在 build/bundled/ 中创建的子目录子目录。相反，我看到了以下内容:

我的应用程序/build/bundled/src/my-element.html

<img src="../images/my-image.png">

为了让它工作，文件结构应该有一个新的 images/子目录，如下所示:

my-app/
  index.html
  images/
    my-image.png
  src/
    my-element.html
  build/
    bundled/
      index.html
      src/
        my-element.html
      images/
        my-image.png

但是，相反，它没有。看起来像这样:

my-app/
  index.html
  images/
    my-image.png
  src/
    my-element.html
  build/
    bundled/
      index.html
      src/
        my-element.html

因此，<img src链接中断。

如何在我的 polymer build 中解决这个问题过程？我是否需要在我的 polymer.json 中添加一些东西？ , manifest.json , package.json , gulpfile.js或类似文件？

Answer 1

您必须将 includeDependencies 数组添加到您的 polymer.json 文件中:

{
  "includeDependencies": [
    "images/**/*"
  ]
}