使用 sails js 图像未显示在 html 页面上
image not getting displayed on html page using sails js
我在我的应用程序中使用了 sails Js 和 Mongo DB。我为博客 post 上传了图片和内容。我将其保存在图像中 folder.I 将文件目标和内容保存到我的 mongodb。使用文件目标,我想在 HTML 页面中显示内容和图像。正在显示内容,但未显示图像。
控制器:
savepost:function(req,res){
var uploadFile=req.file("image")
uploadFile.upload({maxBytes:1000000,dirname:'../../assets/images'}, function onUploadComplete(err, files) {
// Files will be uploaded to ./assets/images
// Access it via localhost:1337/images/file-name
if (err) return res.serverError(err);
// IF ERROR Return and send 500 error
filename=files[0].fd;
var content=req.body.content;
var title=req.body.title;
Cyberblog.create({title:title,content:content,date:date,filename:filename,}).exec(function(err){
if(err){
console.log(err);
message="content not saved";
console.log(message)
res.redirect('/newpost');
}
else{
var start=filename.lastIndexOf('\');
fd="images/"+filename.substring(start+1)
post={
title:title,
content:content,
fd:fd,
}
res.view('pages/blog/blog',{post:post})
console.log("succesfully saved")}
}); }); },
Html 文件:
<div class="container">
<div class="row align-items-stretch retro-layout-2">
<div class="col-md-4">
<a href="single.html" class="h-entry mb-30 v-height gradient" style="background-image:url(<%= post.fd %>);">
<div class="text">
<h2><%= post.title %></h2>
</div>
</a>
</div>
</div>
我无法确定这是否正确<%= post.fd %>。请帮助我。
当您 运行 sails lift
如果您使用带有 G运行t 的任务时,/assets/images
目录将移动到 .tmp/public/images
。
然后,您需要检查 uploadedFile.fd 值以验证存储文件的正确目录,因为您的 public 目录是 .tmp/public
,然后将图像获取为 localhost:1337/images/my-image.png
它应该在本地目录中 .tmp/public/images/my-image.png
.
解决后,您可以使用相对路径通过 URL 或控制器中类似的方式访问文件:
const url = require('url')
post.imageUrl = url.resolve(sails.config.custom.baseUrl, post.fd)
然后,在视图中,使用此值显示图像:
<a href="single.html" class="h-entry mb-30 v-height gradient" style="background-image:url(<%= post.imageUrl %>);">
我在我的应用程序中使用了 sails Js 和 Mongo DB。我为博客 post 上传了图片和内容。我将其保存在图像中 folder.I 将文件目标和内容保存到我的 mongodb。使用文件目标,我想在 HTML 页面中显示内容和图像。正在显示内容,但未显示图像。 控制器:
savepost:function(req,res){
var uploadFile=req.file("image")
uploadFile.upload({maxBytes:1000000,dirname:'../../assets/images'}, function onUploadComplete(err, files) {
// Files will be uploaded to ./assets/images
// Access it via localhost:1337/images/file-name
if (err) return res.serverError(err);
// IF ERROR Return and send 500 error
filename=files[0].fd;
var content=req.body.content;
var title=req.body.title;
Cyberblog.create({title:title,content:content,date:date,filename:filename,}).exec(function(err){
if(err){
console.log(err);
message="content not saved";
console.log(message)
res.redirect('/newpost');
}
else{
var start=filename.lastIndexOf('\');
fd="images/"+filename.substring(start+1)
post={
title:title,
content:content,
fd:fd,
}
res.view('pages/blog/blog',{post:post})
console.log("succesfully saved")}
}); }); },
Html 文件:
<div class="container">
<div class="row align-items-stretch retro-layout-2">
<div class="col-md-4">
<a href="single.html" class="h-entry mb-30 v-height gradient" style="background-image:url(<%= post.fd %>);">
<div class="text">
<h2><%= post.title %></h2>
</div>
</a>
</div>
</div>
我无法确定这是否正确<%= post.fd %>。请帮助我。
当您 运行 sails lift
如果您使用带有 G运行t 的任务时,/assets/images
目录将移动到 .tmp/public/images
。
然后,您需要检查 uploadedFile.fd 值以验证存储文件的正确目录,因为您的 public 目录是 .tmp/public
,然后将图像获取为 localhost:1337/images/my-image.png
它应该在本地目录中 .tmp/public/images/my-image.png
.
解决后,您可以使用相对路径通过 URL 或控制器中类似的方式访问文件:
const url = require('url')
post.imageUrl = url.resolve(sails.config.custom.baseUrl, post.fd)
然后,在视图中,使用此值显示图像:
<a href="single.html" class="h-entry mb-30 v-height gradient" style="background-image:url(<%= post.imageUrl %>);">