Aurelia - 显示静态图像

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

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

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

来源

2017-02-05 millerbill3

图像的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" />。

来源

2017-02-05 04:22:13

我知道，这似乎很明显，这就是为什么我难倒。我目前在'/ src/assets/images'中有我的图片。我已经更新了我的'img'标签'src'指向这个目录。即'assets/images/profilepic.jpg'，但是当我运行我的项目时，图像仍然不会显示在我的浏览器中。该错误显示它试图从“http：// localhost：9000/assets/images/profilepic.jpg”中检索它。 – millerbill3

您需要将SRC添加到路径的开头。浏览器正在加载与index.html文件相关的图像，而不是您的Aurelia视图文件。 –

修复了这个问题......我不清楚在运行的应用程序中会引用哪个目录。即我需要什么级别才能获得相对路径。谢谢。 – millerbill3

Aurelia - 显示静态图像

回答

相关问题