can t load an image from the springboot backend
gives the name but not much more than that
309 Replies
ā This post has been reserved for your question.
Hey @Timo! Please useTIP: Narrow down your issue to simple and precise questions to maximize the chance that others will reply in here./closeor theClose Postbutton above when your problem is solved. Please remember to follow the help guidelines. This post will be automatically marked as dormant after 300 minutes of inactivity.
\
dont you need like the whole path to the server
to be added to the image
don t think so
everything work even the image tag it just doesn t wanna load
yea but you are returning the image path
and that path is on the server right
so the client kinda needs the full path
if im understanding it correctly
wait let me check
it is local
function getImageUrl(imagePath) {
if (typeof imagePath === 'string') {
if (imagePath.startsWith('http')) {
return imagePath
}
return imagePath.startsWith('/') ? imagePath :
/${imagePath}
}
}This message has been formatted automatically. You can disable this using
/preferences.what are you using for the frontend tho
webapp
try to return the server url it should work then
localhost:8080/ etc
don t know what you mean
want to keep the images on the backend db
whats your server url
localhost:8080 or something different
this?
so its 8081
ok
so type in your browser
localhost:8081/static.images/Westerpark.avif
see if it shows you the image
so what are you using for frontend
thymeleaf or something
vue
so local host 8081 is your web app host
and whats the backend host
8080 i think
localhost:8080/static.images/Westerpark.avif
try this then
oops my bad
made a typo
localhost:8080/static/images/WesterPark.avif
try this
hmmmm
ok try this
localhost:8080/images/WesterPark.avif
if that doesnt work show your application properties
yea show whats inside properties
lol
comment out
these last 2 lines
you added
and try the last url i sent
well thats quite interesting
:boohoo:
wait
can you show you named this static.images folder
is it 2 folders or 1 folder named weirdly
2 i think
\
this is the folder
made 2 but it used a .
let me check something
hold on
so i think you have something that blocks the access to static resources
can you show your security config or something like that
for testing purposes can you add permit all for now
on any request
and try this url once again
prefer not to do that guess i will ask my senior dev friend tonight
oh
its a real project
just a uni project
ok
then
here
try these patterns
launch the app and try the url
ok sure
doesn t work
wtf
lol you know what you are doing?š
of course
this gif says i do
hmmmmmmmm
@Timo did you try it out before
did it work
noop
lol
@Timo round 3
localhost:8080/api/images/WesterPark.avif
try that
good call
see
progress
š±
but what does thbis tell me :thonk:
the image worked fine on the frontend same image so it isn t the image fault
means apache is acting weird
ugh
any idea how to fix this?
of course
but first i have to search for it
what info could we use to get there?
can you check what happens if you do
any request permitall
localhost:8080/api/images/WesterPark.avif
localhost:8080/images/WesterPark.avif
and then these urls
have that alr?
server.servlet.context-path=/api
you need the api infront
no i meant
1 second
try
.anyRequest().permitAll()
just for testing purposes
and try all these urls
to the image
illegal
comment out this one
i hate spring security lol
same as before it needs api and with a pi it doesn t work
api
you get this without /api yes
yep
1 second
its time for another crazy idea
btw its static/images not static.images
doesn t matter tho still doesn t show up lol
yea i know
i was just saying
ok lets ask some sigmas cuz im too lazy to search for it
@dan1st can u check
doesnt show image when typing the url
for the resource
ahhhh pings on Eclipse release day
next time set a do not disturb status :GnuTrolling:
it's fine
anyway
problem is
when typing url to the image
like
So it's a 404?
ye
Where is the image located?
resources/static/images
like where is it stored?
ok
and throws no static resource
that doesn't look like
static/images but rather resources/static.images
Was that checked before?
Can I see the application.properties?
thats how intellij clips
folders
if im correct
here
I thought it had some indicator maybe
ok
What is the exact URL?
it would be
localhost:8080/api/images/WesterPark.avif for example
ok
and it throws this
otherwise throws this
uh nu uhh
Can I see the content of the
resources folder in the file explorer? @Timono i can t see the avif file
ehhh yeah
lmao
but it did work in the frontend too
u sure u didnt name the folder
static.images right
I managed to sneak into the New and Noteworthy entry in today's Eclipse release lol
Can you show in the file explorer?
what about lol
Outside of IntellIj
did you create 2 folders
static and images
or did you create 1 folder static.images
oh
ok
so the correct path
Can I see the compiled files?
In the
build folder
Probably build/main or something like thatdon t see that
using gradle if that matters
Can you check outside of IntelliJ?
that's why the folder should be named
build and not target
If it was Maven, I would know it's in target/classes/images
What's in
main?oh no gradle
š
no thats src
check in backend ntr website folder
oh right
what you got in there
What's in
classes?
if there's a main folder, go in there as well
Can you show the content of the
resources folder?i think it should be
build/classes/static/images
build/resources/static/images I think
idk Gradle stuff by hearti never used it so im guessing
lmao
I think with Maven, it would be
target/classes/static/images
im from the maven gang
sounds about right
kotlin uses gradle as default
Can you stop the application and run it via
gradlew bootRun?what the hell is gradlew bootrun/
In IntelliJ, press the Ctrl key twice
and in the input dialog, enter
gradlew bootRun
I think that should do something
yep there
why does it have the w
from helping intellij users so often ur gonna be an expert of it without ever opening intellij
Typically gradle uses a wrapper script - e.g. the gradlew.bat
this wrapper script finds the right Gradle version or downloads it if necessary
bootrun is slow lol
tbh I don't like these but they work most of the time
even if you don't have Gradle installed
hella slow lol
Can you open the website again?
frontend backend?
it sais started
the one you tried to access before
where the image doesn't work
how long should a bootrun take?
until you stop it
As soon as it says "Started", it's started
and then it runs until you stop it
Can you try the image?
so same as running the backend but with some perks
the one that didn't work before
wdym it should show up if it worked?
yes it's the same thing but it's run by Gradle properly
ideally but we'll see
so what do you expect me to do?
show me what happens when requesting the image again when running it via
gradlew bootRunbut what tasks does that involce?
makes sure the project is built properly
but how should i check that
omg
you have this in your application.properties
comment out the
spring.web.resources.static-locations line\
did that restarted no images on the frontend yet
same request again?
same way
but this with that commented out
Can you show it?
and you restarted the backend?
Can you show the request to the specific image from before?
what do you mean with from before?
š±
shocking
need to change the config for that ig 1 min
so what was the problem
target not built properly
application.properties
oh
well at first i thought to comment it out
cuz it should search that on default
it's
/static.images there, not /staticš¤©
so what should be the problem with the db to frontend?
your controller should return the url you typed
to the resource
so it shows up
What exactly is the problem there?
i simply just want it from the db im a bit confused
that the images don t show up in the frontend
Can you check the browser devtools?
Seems like it requests the wrong URLs?
but how should it get it then cuz it is better to load from the db than for the images in the backend?
the rest just gets loaded out of the db
so yeah
does that makes sense cuz from the db is better right?
you need to send the whole image path
so
localhost:8080/api/images/WesterPark.avif
thats the request the frontend needs to send
to load that image
but then i don t use the db like i do for the rest
wdym
in yoru dto
when you fetch from db
you can just add the
uhhhhhhhhhhh
localhost:8080
so if in your databsae you got
'/static/images/blabla/
in dto add localhost:8080
does that make sense
noo guess my brain is fried uh
lmao
ok
in simpler words
you have this in your database
show how your dto looks like
and fetching from database
package com.example.backend.dto;
This message has been formatted automatically. You can disable this using
/preferences.
wait
where is the code where you fetch the event from the database
is it this one
the eventservice yeah
oh its the get all
okay so
if you dont want to add dto
what you need to do is
in the image field
do
actually nevermind you gotta use dto anyway lol
orrrr
not
:thonk:
change /static/images/WesterPark.avif to /images/WesterPark.avif
and on your frontend
show your frontend
This message has been formatted automatically. You can disable this using
/preferences.no
frontend
This message has been formatted automatically. You can disable this using
/preferences.the web app
great
yeah i know chill
im mega chill
i have this pillow btw
lmao
function getImageUrl(imagePath) {
if (typeof imagePath === 'string') {
if (imagePath.startsWith('http')) {
return imagePath
}
return imagePath.startsWith('/') ? imagePath :
/${imagePath}
}
}anyway
i like that smile
okay so just do
'localhost:8080/api' + imagePath
when you are showing the image
like this?
idk the correct javascript syntax but yea
show how you set the image link
img src
in code or in webtools?
code
show the code where you set stuff basically
<img :src="getImageUrl(event.image)" :alt="event.title" />
can you try hardcoding it for a second
no i meant
check if that works
fixed it
ok so
next challenge is let it use the local db :idontunderstand:
now add the old method get image url
with this return
check if it works
why would it work now?
do you even need this part
why not just do
fair
<img :src="getImageUrl(event.image)" :alt="event.title" />
yes
and the method i sent
This message has been formatted automatically. You can disable this using
/preferences.
u forgot the http
that i added
This message has been formatted automatically. You can disable this using
/preferences.si
show whats in the database
the path
to image
how can i see that?
oooh
well that explains a lot
i would say its better to return the path only
so just make another field in the database with like
named like
imagePath
or something
and put the path there
but why 2?
that is confusing
because what you are storing is byte
and not a string that is the actual path
what that means is
you are returning the whole image to the frontend
instead of just the url
which is not that efficient
is a blob better then?
no
what i meant is
add another field in your database named
imagePath
and put the path there
make it a string
unless you wanna do it how it currently is
sooooooo
ur choice
but sending only the path is more efficient
but what is the point of the db then if im storing it doible im confused
rn you are getting the actual image bytes from the database and sending it to the client
yeah so why doesn t that work?
show the response on the events endpoint
what it returns on the image field
from the frontend
my brain has a stack overflow ngl
lmao
yea
on the frontend
click inspect elements
network
events
and response
wrong request
this one
yea and click response
or whatever thats named in dutch
or the language you are using
correct
expand the first json
and show what it says on image
alright
now
š
try this
weird
<img :src="getImageUrl(event.image)" :alt="event.title" />
why didn t it bring anything?
show the function
function getImageUrl(imagePath) {
if (!imagePath) return '';
return
data:image/avif;base64,${imagePath};
}
first had png
didn t work eitherThis message has been formatted automatically. You can disable this using
/preferences.try this
// function getImageUrl(imagePath) {
// if (!imagePath) return '';
// return
data:image/avif;base64,${imagePath};
// }
function getImageUrl(imagePath) {
return 'data:image/avif;base64,${imagePath}';
}
like this without '' i get errors
should we ask daniel?
hm?
the 101 switching protocols thing is not an error - it's normal behavior for websockets (it switches from HTTP(s) to WS(s))
but why doesn t it wanna show it even with
this
I think if it includes the base64, it should be the base64 of the image content, not the image path
so either the server could send you the path of the image and then the client loads the image from that path
or the server sends you the base64 of the image content
but what needs to be changed then cuz i sent the db content of the image?
like i just don t know what to change at htis point
it already sends the byte[]
let me check
print each events image here
while fetching it from database
i think somethings wrong with this byte thing
i have to eat now will be back in 30 min or so š
thank you for the help tho
If you are finished with your post, please close it.
If you are not, please ignore this message.
Note that you will not be able to send further messages here after this post have been closed but you will be able to create new posts.
ok
done use a b64 to convert it into the db otherwise it was not possible
so does it show the image now
yeah but prob wanna fix it another way cuz the b64 takes up 7000 lines in the data.sql
well thats how saving an image works
l0l
what you could is
on app startup
actually nvm
waste of time
is is done alr can close this after infinite messages lol
your decision
if you consider it done, feel free to close the post
what has that to do with this post?
Post Closed
This post has been closed by <@591288621345275915>.