Aurelia - 显示静态图像

Question

我刚刚开始使用 Aurelia，当我运行我的应用程序（在开发中）时，我很难包含静态图像。 IE。我有一个img 标记和一个src 指向图像在我的文件夹结构中的位置，但是当我请求它时我不断地得到一个404。 我在我的应用程序根目录中的图像标记的src 属性中引用了图像，但是当我运行我的应用程序时它不可用。

<div id="profile-pic">
  <img src="./profilepic.jpg" />
</div>

我需要修改我的 aurelia.json 文件吗？

Answer 1

图像的 URL 与页面相关，而不是与您的视图相关。所以构建链接，就好像你是这样链接到它的。通常，您的页面是index.html，位于项目的根目录下，在src 文件夹旁边。因此，当您链接到位于src 文件夹内的图像时，您必须在路径中包含src。因此如下目录结构：

my-project
|- index.html
|
 \src
 |-app.js
 |-app.html
 |-profilepic.jpg

将要求您在视图中使用 <img src="src/profilepic.jpg" />。

话虽如此，我建议创建一个单独的文件夹，其中包含您的静态图像。这将清楚地表明这些图像不是应用程序源文件的一部分，而是支持图像内容。您可以将此文件夹命名为 images 并将其放在项目的根目录中，与 src 文件夹并排放置。

my-project
|- index.html
|\images
| |-profilepic.jpg
|
 \src
 |-app.js
 |-app.html

那么你会在你的视图中使用<img src="images/profilepic.jpg" />。