图片不显示在sails.js视图中 [英] picture do not show in sails.js view

问题描述

我的资产文件夹:

assets  
     | images  
            | media  
                  | book  
                        | pictures  

当我在上面的路径上传书籍图片时，我想创建新书，但是当我尝试在视图中显示此图像时，图像无法显示并且也没有错误.
我的代码是:

i want to create new book when i upload book picture in above path, But when i try to show this image in view, the image can not be displayed and there is no error either.
my code is:

//BookController
create: function (request, response, next) {
var title = request.body.title;
var subject = request.body.subject;
var brief = request.body.brief;
var author = request.body.author;
var origin_pic_name = null;

request.file('pic').upload({
  dirname: '../../assets/images/media/book/pictures/',
},function (err, file) {
  if(err) console.log(err);
  origin_pic_name = file[0]['fd'].split('\\').reverse()[0] ;

  Book.create({title:title,subject:subject,brief:brief,author:author,pic:origin_pic_name}).exec(function (err) {
    if(err) response.end(500, {error: 'Database Error'});
    response.redirect('/');
  });

});},  

index : function (request, response, next) {
Book.find({}).exec(function (err, books) {
  if(err) response.end(500, {error: 'Database Error'});
  response.view('book/index', {books:books});
});},  

//my index.ejs
<ol>
<% books.forEach(function (value) {%>
  <h3><li> <%= value.title %></li></h3>
  <ul><%= value.author %></ul>
  <ul><%= value.subject %></ul>
  <ul><%= value.brief %></ul>
  <ul><img src="/images/media/book/pictures/<%= value.pic %>"/></ul>
<% })%>
</ol>

谢谢

推荐答案

上传图片到 Sails 时需要非常小心:

You need to be very careful when uploading images to Sails:

Grunt 正在监视某些文件夹中的变化，包括 assets 目录和子目录.但这只有在开发"环境中才有可能(激活，tbh).

Grunt is watching for changes in some folders, including the assets dir and subdirs. But that is only possible (activacted, tbh) in "Development" enviroment.

• 在您的根目录中创建一个 images/ 目录.
• 上传图片时，让 skipper 将图片保存在那里.

• 编写一个 mediaController 来捕捉像 /images/media/book/:name 这样的路由，并尝试定位并发送一个文件:

• Create a images/ dir in your root.
• When uploading the image, make skipper save the image there.

• Write a mediaController that will catch routes like /images/media/book/:name and will try to locate and send a file:

// MediaController.js
var fs = require('fs');
var path = require('path');

module.exports = {
    get : function(req, res){
        var filepath = req.name.slice(1,req.name.length);

        // remove this Sync to an Async 
        if(fs.existsSync(path.resolve(filepath))){
            return res.sendfile(filepath);
        } else {
            return res.notFound();  
        }
    }
}

//Routes.js
'get /images/books/:name' : 'MediaController.get'

• 如果需要，您现在可以使用策略限制图像的访问！
• 更好地处理图像和 100% 控制 fs.适合DO Spaces，例如...

• You can now restrict the access of images with policies, if you want to!
• Better handling at image and 100% control over the fs. Good with DO Spaces, for example...

这篇关于图片不显示在sails.js视图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！