img not displaying from Mongodb img address
So my Mongodb has values as
name : "item1" ,
img : 'Assests/Icons/iconName'
And In react folder , inside public folder
public ->
---Assests/Icons/ "all icon images"
But I gave the icon name in db values .
For example
For burger icon I gave
img : 'Assests/Icons/burger' in db
And I have burger.png have in public folder
14 Replies
So the image is not displaying,
I use map function and other values as name are displayed but
<img src={val.img} alt='img' />
Is not working
It shows alt text
Just to be clear, you're storing
Assets/Icons/burger & not Assets/Icons/burger.png? If so, that's your problem.But I tried like
<img src={
${val.img}.png} and every images is png soIf you look in the network tab in the developers tools, do you see a request for
Assets/Icons/burger.png? What is the associated HTTP code? 200 or 404?
If you put the image name directly in the URL, does it display?the
img property doesn't exist in val
also, why don't you store the full path in the database?I should do this first , I'm sorry for wasting this time , the problem is the image is not png it actually is jpg but thanks
I solved that problem but is storing img in db Is better or store address is better ?
the relative path
the database is a terrible place for images
Oh I see
Ok
just think about this: everytime you get the images from the database, you have to transfer them over the network
if you have a 10kb image (which is pretty small), you will need 10kb+ per request for that image
if you do 1000 requests, that's 10mb
which doesn't sound so bad
now, imagine you have 10 images: that's 100mb (and im not counting with overhead)
1000 requests a day isn't that much... now imagine over 30 days
that's a total of 3gb of data sent from the database to you
coming from a database, that's A LOT of data
or, just put the images in a cdn and don't worry about it
also, databases slow down with number of records, but also a lot with total file size
a couple hundred MB of various images in your database will potentially hurt performance a lot
also, i don't think that blobs can be cached, which makes the queries idiotically slow
https://stackoverflow.com/a/16860975 <-- also, read the update
Ok , Thanks for all the information
U r explaination clears me
you're welcome
the best approach, for you, is a cdn - for example, caching everything with cloudflare
or an s3 bucket or something
you can also just use svgs, which is just code
for example, a burger menu can be done with an svg with a path like
M2 2 9 2M2 4 9 4M2 6H9
or even a clip-path
thats for a 12x12 svg, by the wayI don't learn about svg's or cdn yet
But I will try to learn quich as possible