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.
Related
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)} />
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}}>
I'm trying to load images stored in my database folder using this code:
<Carousel autoplay>
{props.images.map((image, index) => (
<div key={index}>
<img style={{ width: '100%', maxHeight: '150px' }}
src={`http://localhost:5000/${image}`} alt="productImage" />
</div>
))}
</Carousel>
</div>
But I'm Getting this error:
error
Images stored in database are like this:
{
"images": [
"uploads\\1596557942509_discount.png"
],
"categories": 3,
"_id": "5f298a8f205d0e109c896979",
"productname": "Justchecking",
"price": "444",
"shopadress": "Checking",
"contactdetails": "9999999",
"createdAt": "2020-08-04T16:19:27.168Z",
"updatedAt": "2020-08-04T16:19:27.168Z",
"__v": 0
},
if you use folder on Node.js backend, you should set up serve static
If the serve static have been set up, check if the link to the static is correct.
Also, check if the links in images array is correct (especially the two backward slashes)
Finally, the error tells that the images not found, so before you will paste it to react, try to paste the absolute image URL to browser and check it. If you will fix the problems mentioned above, it should work
I have tried your code in editor and the urls which are getting formed are shown in output. Please try to open the image in the browser and if that is not working, then correct the path and try.
The error that is coming is because your image path is not correct.
["uploads\\1596557942509_discount.png", "uploads\\1596557942509_discount.png"].map((image, index) => (
console.log("http://localhost:5000/" + image)
))
Output of your images are:
"http://localhost:5000/uploads\1596557942509_discount.png"
"http://localhost:5000/uploads\1596557942509_discount.png"
My guess is you use Webpack for bundling. Webpack needs to "require" dynamics paths for image source due to its internal module management flows. Here is a good sample of a similar implementation. And I think this and this will help you to get closer to the root of the problem.
There is another point worth noticing. Using an array index as "key" for child components is an anti-pattern as explained here. You can reuse component ids for keys.
I don't get how your image is stored? Is only the name being stored and you are saving it to your server?
Perhaps try multer and sharp to convert image to buffer and then retrieve it .
<img src={bufferImage!=''?`data:image/jpeg;base64,${bufferImage}`:"https://reactbootstrap.netlify.app/logo.svg"} />
user multer and sharp at the backend.
so perhaps rather than saving
uploads\\1596557942509_discount.png it would be better to have something like { uploads\\1596557942509_discount.png : daskdas... }
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..
I'm working with polymer and I'm testing all in my local environment and all is working as expected, but the problem is when I'll move it into production, where the url shouldn't be the same as in my local. In node.js I can set it via the config.json file and catch it with app.get('config') or something like that, but in polymer I cant get it, and the only chance I have is to create another endpoint with all the config.json config file, but, and here is the best part, I should hardcode this url in polymer!! (so annoying). There is some way or library or component or something that I'm missing ?
Thanks in advance guys! StackOverflow and the users helped my a lot!
UPDATE
The thing is that I'm using custom elements (because I had handlebars too and there is a little problem with the {{}}) so, in the custom elements that I created I have this (for example in the core-ajax call):
<core-ajax id="login" auto="false" method="POST" contentType="application/json" url="/app/middle/login" ....></core-ajax>
as you can see the url is a little bit hardcoded, I want to use something like this (this is what I have on the node.js endpoint application):
router.post(endpoint.login, function (req, res) {
and I want to got something like that over polymer
<core-ajax id="login" auto="false" method="POST" contentType="application/json" url="{{login}}" ... ></core-ajax>
<script>
Polymer('log-form', {
login: endpoint.login,
ready: function () {
....
})
});
</script>
I'ts more clear now? I'm not so strong on english language.
Thanks Guys, for all!