CODEWITHSUNDEEP
htmlejssails.js
klanm
klanm

Reputation: 3258

how to access assets/images from the view in Sails.js?

I simply want to add an image in a view in my Sails-Project

My view-file has the location

views/album/albums.ejs

and the image is located in 

assets/images/placeholder.png

if I add the image like this

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

I get this error

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

Am I missing something?

Upvotes: 8

Views: 15371

Answers (5)

Pedro Cuasqui
Pedro Cuasqui

Reputation: 1

If you have the tasks/sync.js file in your project, add the following object in files array:

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

you need to have sails-hook-grunt and grunt-sync installed.

Upvotes: 0

Vishal Biradar
Vishal Biradar

Reputation: 1229

I was also facing the same problem.
In sails version 0.12.0,
I was trying to show an image from assets folder to homepage.ejs.
Then by using below img tag, it solved my problem. 

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

But as your ejs file is inside views/album/albums.ejs

I may suggest, below may work

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

But the right approach in sails ejs pages is,

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

This must work for you also.

Upvotes: 0

mrded
mrded

Reputation: 5270

Looks like you have grunt hook removed.

When removing the grunt hook you must also specify the following in .sailsrc in order for your assets to be served, otherwise all assets will return a 404.

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

Upvotes: 3

zmilan
zmilan

Reputation: 1152

Sails use Grunt (Gruntfile.js in root of project) to execute some tasks during sails lift. One of that tasks is to copy files from assets directory to .tmp/public/ directory (in development version). So if u add your file to assets directory you will need to restart sails (sails lift) to get it accessible from .tmp/public/ (what is public accessible directory root). Also its important to note that if u put files directly to .tmp/public/ it will be accessible instant, but on next sails lift it will be deleted, since one of Grunt tasks is to clear that directory before copy new files. All of this u can find on sails documentation (assets and asset-management) and by reading Gruntfile.js in root of your project

Upvotes: 15

snyx
snyx

Reputation: 1104

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

should work. the assets folder is the equivalent to adding a folder with the static middleware in express.

asset documentation

Upvotes: 8

Related Questions