如何从 Sails.js 中的视图访问资产/图像？答案

【问题标题】：how to access assets/images from the view in Sails.js?如何从 Sails.js 中的视图访问资产/图像？
【发布时间】：2013-09-18 03:08:21
【问题描述】：

我只是想在 Sails-Project 的视图中添加图像

我的视图文件有位置

views/album/albums.ejs

图片位于

assets/images/placeholder.png

如果我像这样添加图像

<img src="../../assets/images/placeholder.png">

我收到此错误

GET    http://localhost:1337/assets/images/placeholder.png    404 (Not Found)

我错过了什么吗？

【问题讨论】：

标签： html ejs sails.js

【解决方案1】：

<img src="/images/placeholder.png">

应该可以。 assets文件夹相当于在express中添加一个带有静态中间件的文件夹。

asset documentation

【讨论】：

你会这么想：“在解除之后，一个名为 myApp/assets/newFolder/data.txt 的文件可以在 localhost:1337/newFolder/data.txt 访问”，但这只是错误信息——即使它在文档站点 (docs.anatomy.assets) 上。我不敢相信他们会有这个 bs 在那里。

【解决方案2】：

Sails 使用 Grunt（项目根目录中的 Gruntfile.js）在升帆期间执行一些任务。其中一项任务是将文件从 assets 目录复制到 .tmp/public/ 目录（在开发版本中）。因此，如果您将文件添加到 assets 目录，您将需要重新启动sails（sails lift）才能从 .tmp/public/ （公共可访问目录根目录）访问它。同样重要的是要注意，如果您将文件直接放入 .tmp/public/ ，它将可以立即访问，但在下一次航行时它将被删除，因为 Grunt 的任务之一是在复制新文件之前清除该目录。所有这些您都可以在sails 文档（assets 和asset-management）中找到，也可以通过阅读项目根目录中的 Gruntfile.js 来找到

【讨论】：

如果有数千张图片怎么办？如何让sails直接访问图片？
@yongho 这样您就可以直接访问图像。因此，您可以像这样访问图像。但是需要注意的重要一点是，您将图像存储在“资产”目录中，并且在提升过程中，Sails 会将它们复制到您的公共目录中。就这些。但是，一旦将图像（或其他资产）复制到公共目录，您就可以使用直接 url 访问它们。 Sails 也保持与您在“资产”目录中创建的目录结构相同的目录结构。

【解决方案3】：

看起来您已删除 grunt 挂钩。

删除 grunt 钩子时，您还必须在 .sailsrc 中指定以下内容，以便为您的资产提供服务，否则所有资产将返回 404。

{
  "paths": {
    "public": "assets"
  }
}

【讨论】：

【解决方案4】：

我也遇到了同样的问题。
在sails 0.12.0版中，
我试图将资产文件夹中的图像显示到 homepage.ejs。
然后通过使用下面的 img 标签，它解决了我的问题。

<img src="/images/placeholder.png" width="30px" height="30px">

但是由于您的 ejs 文件位于 views/album/albums.ejs 中

我可以建议，下面可能会工作

<img src="../images/placeholder.png" width="30px" height="30px">

但在sails ejs 页面中正确的做法是，

<img src="/images/placeholder.png" width="30px" height="30px">

这也必须对你有用。

【讨论】：

【解决方案5】：

如果您的项目中有 tasks/sync.js 文件，请在 files 数组中添加以下对象：

{
        cwd: './assets/images',
        src: ['**/*.*'],
        dest: '.tmp/public/images'
}

您需要安装sails-hook-grunt 和grunt-sync。

【讨论】：