I have successfully managed to save the filename to my mongodb database, but I can't seem to figure out how to display the image to handlebars page. This is the code that I'm using:
router.get('/showPost/:id',(req,res) => {
Post.findById(req.params.id).then((post) => {
res.render('showPost',{ post: post})
});
This is how I try to display my image, but it only appears as a broken icon.
<img src = {{{post.image}}} >
Any help would be appreciated!
Have you setup your index.js properly?
app.use(express.static('public'))
Create root folder call public. Put your images there
Then do
<img src="/{{post.image}}>
Related
I have a public folder ( like this
\css
\js
\components
\images
\image-1.jpg
\icons
) in a node project i want to access the image in html like
<img src="images/image-1.jpg">
but in browser shows an err
however,
I've used
app.use(express.static("public")) like that in app.js file
but it didn't work
I've also tried
app.use("\images", express.static(__dirname + 'public/components/images')
but result was same
I don't know what to do
It feels like you are a beginner to all of this. You are making a simple mistake. You mentioned that images are inside components at path /images. So you should be able to access images like /components/images/image-1.jpg. You are not able to access images because /images is not a direct child of public directory.
Similarly, all CSS and JS files can be accessed /css/filepath and /js/filepath respectively.
I'm trying to display image from public folder of my node api directory. I want to display image in front end vue file. I don't know how to give source of image.
This is the directory. I want to display image nodelogin.png
I want to display these images.
<img :src="myimage" alt="Logo" width="80" height="80" />
This is my template code.
async created() {
this.myimage = await this.getImage();
},
methods: {
async getImage(){
return await 'http://localhost:4000/api/public/nodelogin.png';
}
}
But this code gives an error response.
Cannot GET /api/public/nodelogin.png
Actually I'm new to node and Vue So I'm not sure whether my logic is correct or not.
Do I need to do something from my backend side?
Just use the url '/nodelogin.png'
Thanks for your question posting.
If you want see png, you should input url :
http://localhost:4000/nodelogin.png
Good luck for your business.
When i'm trying to display an image <img src = {require(path)}/> I dont know why, i dont get that images when i start the react app, althogh my partner on his computer can see the images. And I have deleted and installed all from his files.
The images on browser appears as <img src = [Object Module]/>. I've done some research, and it seems to be some problem with webpack or url-loader, but i dont understand why on my computers isnt working and in my parnert is.
If someone have an idea. Please help.
Thank you.
Try to import the image first like this:
import image from '../image.jpg'
const App = () => {
return (
<img src={image} alt='image' />
)
}
You might wanna wrap the src value in braces
<img src={require(path)} />
This is a unique question: I don't want to use browser javascript to solve this, please read on...
I want to convert <img src="..."> to Base64 img tag by compiling the app (ng build or ng serve), to make the image load instantly - without further downloads other than the app itself, but also to make the image dynamicly changable while developing the app.
For example, here's a component - home.component.html:
code before compiling (notice the base64 directive, its just an idea though):
<img src="assets/images/phone.png" base64>
code wanted after compiling:
<img src="data:image/png;base64,iVBORw0......rest-of-base-64-goes-here">
Important: This should happen without running a front-end javascript operation by the user, or by calling the image file. (by means, the file phone.png will not even exist when compiling)
I still want to edit the local image phone.png while developing.
I know I can convert the file to base64 manually and update it in my component, but that's exactly what I don't want to do - I want it to happen automatically to save time.
That means the image will sit in the component itself, in one of the .js files that has been compiled, and therefore will load instantly with the app.
Idea: It would be nice and easy to have a directive that would take care of that.
something like <img src="phone.png base64>**
I assume it can be done using node/webpack in some way, but I have not idea how.
You need to use readAsDataUrl()
function getBase64(event) {
let me = this;
let file = event.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
//me.modelvalue = reader.result;
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
Hope can help you..
Evening Everyone,
I have started doing some research for an application i want to write using the electron framework. I have figured out how to display what i want to the user with the exception of the icons. There is a part of the application where the user can type a path and it will list the files in that path, i would like to pull the icon from the files so its displayed just like it would be in the windows file explorer. This is where i have been running into a roadblock and I'm looking for some guidance.
Is there a method in nodejs that would allow me to provide a file path and in return get a image back i can pass to HTML? Im new to nodejs so i figured i would ask and see if anyone knew of an easy way.
There is icon-extractor
you can use it like this to extract any app icon from the system , but it must be an**".exe"** file.
var iconExtractor = require('icon-extractor');
var fs= require('fs');
iconExtractor.emitter.on('icon', function(data){
console.log('Here is my context: ' + data.Context);
console.log('Here is the path it was for: ' + data.Path);
var icon = data.Base64ImageData;
fs.writeFile('img.png', icon, 'base64', (err) => {
console.log(err);
});
});
iconExtractor.getIcon('ANY_TEXT','PAHT_TO_APP.exe');
If you are using electron, you might run into a lot of issues. For me no other package worked than this one:
Windows Powershell Icon Extractor