Aurelia - 显示静态图像

Question

我刚刚开始使用Aurelia，而且在运行我的应用程序（在开发阶段）时，我遇到了包含静态图像的困难时期。即我有img标记，其中src指向图像在我的文件夹结构中的位置，但在请求时我会不断获得404。 我的图像标记的src属性中引用的图片位于我的应用程序的根目录中，但在运行我的应用程序时它不可用。

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

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

Answer 1

图片的网址是相对于网页的，而不是您的视图。因此，构建链接就像您正在链接它一样。通常，您的网页为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" />。