how to build image service website with sails.js - image

I am using sails.js to build an image service website. There are lots of images need be shown on the webpage. And the website will allow users to upload images as well. If I put it all images under assets folder, they will be copied to .tmp/public everytime when i restart the sails server . it will be very slow. Does anyone have an idea where should i put .Should I write a route rule to handle this? thanks.

/assets are for your static contents (like css, frontendjs, ...).
If you have a lots of images you should place them in one folder of your server and write a route for showing it.
Or better: Use some Cloud-Hosting like amazonS3 or imageShack.
Example for middleware:
1.) create a file "express.js" in config/
2.) Put this code into the file and change to the right path (routing + your local folder):
module.exports.express = {
customMiddleware: function(app){
app.use('/images', require('../node_modules/sails/node_modules/express').static('/User/yourfolder'));
}
}

Related

No images on Nuxt static site after running npm run generate

I am working on a small nuxt website for a client, i havnt been using nuxt for very long but so far what i do is add target: "static" to the config when i'm ready to build for production, then send the dist folder to backend for deployment, but now i notice that after i run npm run generate images and others assets like js files do not get added to he page.. i have tried to create a new dummy project just to test, chose static mode when setting up the project, added 1 image to the project and display it in index page using
<img src="~/path-to-file" />
the image will appear normally in dev server, will also appear if project is hosted on netlify, but will not appear in git-pages or local apache server
i am confused on why this is happening, typically adding target static fixes issues like this but not this time, please help
There are two main ways to display images through nuxt. One via the assets folder, the other via the static folder.
Any images in the /assets folder will be bundled with webpack. These images can be referenced using:
<img src="~/assets/image.png"/>
If you do not want images to be bundled by webpack, then save them in the /static folder and reference using the following format:
<img src="/image.png"/>
Currently, you are using ~/ , which is shorthand to the base directory. Once you build your site for production this will no longer work, because the structure is transformed - which is why there is a discrepancy between your environments.

How to fetch newly added images from VM in google cloud platform?

When I add images it is stored inside google cloud platform VM correctly.
But I am not able to fetch newly added images in my website.
If I redeploy project with newly added images in assets folder it is showing correctly.
I have verified there is no mistake on frontend or backend side.
Is it not possible to get live image update with VM?
Edit:
I have used Vue.js.
I am storing images inside src/assets folder.
When I save images in my website it is saved at src/assets folder.
I think it can only access things in dist folder after build.
Can you suggest where should I save my file?
I'm making an educateg guess it's some cache issue.
Instead of putting your image files inside the VM you can try storing them in a bucket that's accessible to public. The downside is that it can serve only static files (no PHP or anything).
You have to configure your load balancer to forward all your.domain.com/images/ requests to the bucket but that's actually quite easy. Have a look at my answer asking for such configuration.

Laravel Vapor - Assets (logo) on maintenance mode page

According to the docs we are able to put a 503.html document inside the root of our Laravel project.
You may customize the maintenance mode splash screen for your application by placing a 503.html file in your application's root directory.
I would however love to be able to put one or more assets on this page (for example our Logo) to make this page better more personal. Laravel Vapor automatically uploads your static assets to cloudfront, which is not a problem if you're using the asset() helper. However, are there any solutions already being made? I can't find any.
Is there anyone who has created a solution to make this happen?
With Vapor every time you deploy all the assets get a new cloudfront url. This is mostly fine for js and css which we change often. Images, logos etc do not change much.
Better to make another bucket on aws and hard code the path the image file in your 503. Doesn't need to be deployed every time. Your users browsers can cache it for as long as you set it in the bucket.
I'd like Vapor to only change asset urls if the files have changed but so far that is not the case.

Secure upload files in Laravel

I have a Laravel 5 project in which I am uploading files in database in Medium Blob format.
But uploading files in database takes some extra time to execute.
Uploading files in database is a secured way to keep files safe from crawlers or some bots.
I have tried to Upload files to the Public folder. But the crawlers can open these files.
Is there any possible way to upload files in the file system?
So that the Crawlers cannot open these files.
I want these files to be Secured
you can upload them outside of the public scope. For example, storage/ folder is a good place. Also, you can grab them using the file system manager. Take a look:
$image = \Storage::get('file.jpg');
Edit
A correct laravel installation just allow the content of public/ to be accesible via web browser. If other directories as storage/ or resources/ are public too, then you installation is really incorrect.
Said that, once you upload the files in storage/ folder nobody can access them except by you using the \Storage facade. When you call for example \Storage::get('file.jpg'); it returns an stream of bits that you can allocate them in a temporary folder and then display it in the webside. Once the request has finished, the image will disappear again from public domain.
No need to change the directory this can be achieved by two ways
LazyOne Answer using .htaccess
AND
Using robots.txt
I will suggest to implement both .htaccess and robots.txt as some cheap crawlers ignore robots.txt but they can't ignore .htaccess
You can follow this method
image-accessibility-for-authenticated-users-only
As this only allows authorized uses to view image

Meteor Images, CSS, "Normal" Web Serving

I've seen this question come up a lot;
How do I put images on my Meteor website?
How do I host "standard" web content with Meteor?
I tried adding a <img src="img/myimage.png"> tag but no image shows!
How can I host some files on a Meteor site?
Put the content in a folder named "public" in your project root.
You do not need to include /public in your URLs.
Any additional folder structure within public is supported.
NodeJS routing plugins are not required, as other answers have supplied.
Place external library's javascript files in /lib. They will be automatically included.
Explanation
In Meteor, you can host "standard" web content by creating a "public" directory in the root of your project. Any images, files, or data you place in this folder will be served as normal by the NodeJS server, as if they were in the root of the server.
Example
Structure within project: /public/test/img.png
Corresponding image URL: /test/img.png
Example HTML tag: <img src="/test/img.png"/>
Create a new folder public inside the project directory. Add a new folder img (or any other name of your choice) inside the public folder. Copy all the images that you require to be added in to your HTML into this folder.
Now you can use it like - <img src="img/myimage.png">
You don't need to include /public in the in the URL.

Resources