Aurelia-显示静态图像

我刚刚开始使用Aurelia，当我运行我的应用程序（在开发中）时，我很难包含静态图像。也就是说，我有一个

img

标签，标签上有一个

src

，指向图像在我的文件夹结构中的位置，但当需要时，我会不断得到一个404。 我在应用程序根目录下的图像标记的

src

属性中引用了图像，但在运行应用程序时它不可用

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

---

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

图像的URL是相对于页面的，而不是相对于您的视图的。因此，构建链接，就好像你是这样链接到它的。通常，您的页面是

index.html

，位于项目的根目录下，与

src

文件夹相邻。因此，当链接到位于

src

文件夹内的图像时，必须在路径中包含

src

。因此，目录结构如下：

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

将要求您在视图中使用

也就是说，我建议创建一个包含静态图像的单独文件夹。这将清楚地表明，这些图像不是应用程序源文件的一部分，而是支持图像内容。您可以将此文件夹命名为

images

，并将其放置在项目的根目录中，与

src

文件夹一起

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

---

然后在视图中使用

。

图像的URL是相对于页面的，而不是相对于视图的。因此，构建链接，就好像你是这样链接到它的。通常，您的页面是

index.html

，位于项目的根目录下，与

src

文件夹相邻。因此，当链接到位于

src

文件夹内的图像时，必须在路径中包含

src

。因此，目录结构如下：

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

将要求您在视图中使用

也就是说，我建议创建一个包含静态图像的单独文件夹。这将清楚地表明，这些图像不是应用程序源文件的一部分，而是支持图像内容。您可以将此文件夹命名为

images

，并将其放置在项目的根目录中，与

src

文件夹一起

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

---

然后你会在你的视图中使用

。

我知道这似乎很明显，这就是为什么我感到困惑的原因。我目前在

/src/assets/images

中有我的图像。我已经更新了我的

img

标签

src

，指向这个目录。i、 例如，

assets/images/profilepic.jpg

，但是当我运行我的项目时，图像仍然不会显示在我的浏览器中。错误显示它试图从“”检索它。您需要将SRC添加到路径的开头。浏览器正在加载与index.html文件相关的图像，而不是与Aurelia视图文件相关的图像。这将修复此问题。。。我不清楚在运行中的应用程序中将引用哪个目录。即，我需要从哪个级别获取相对路径。Thx.我知道这似乎很明显，这就是为什么我被难住了。我目前在

/src/assets/images

中有我的图像。我已经更新了我的

img

标签

src

，指向这个目录。i、 例如，

assets/images/profilepic.jpg

，但是当我运行我的项目时，图像仍然不会显示在我的浏览器中。错误显示它试图从“”检索它。您需要将SRC添加到路径的开头。浏览器正在加载与index.html文件相关的图像，而不是与Aurelia视图文件相关的图像。这将修复此问题。。。我不清楚在运行中的应用程序中将引用哪个目录。即，我需要从哪个级别获取相对路径。谢谢。