I want to display user profile picture to get image name from db. I am writing code like this
I am getting image variable from api userData?.picture
<img src={require(`../../assets/img/userprofileimages/${userData?.picture}`)} />
But my app stop to work nothing dispaly. can any one help please
Related
After a few days of non-coding I went back and after I try to do something or change
the value of text in component in my app and I did noticed that my localserver is not respoding.
everytime i need to refresh the browser, the console shows it to me --> http://localhost:3000/main.771124e74a556866ffcc.hot-update.json net::ERR_INTERNET_DISCONNECTED
I create app with (CRA)
enter image description here
I have images on a DigitalOcean space, but my problem is that when I want to display the image in reactJS inside a img tag as follow:
const search =
'https://wantedoffice.dev.bucket.ams3.digitaloceanspaces.com/smartphone.png';
.......
<img height="80px" src={search} />
it doesn't display the image but this:
sometimes it works it's really weird, but I need this to work everytime !
When I copy/paste the image url in a browser it works so I don't understand, you can try to copy/paste this url in your browser https://wantedoffice.dev.bucket.ams3.digitaloceanspaces.com/slide_inspiration.png
Image is well public in DO space and accessible.
I think it comes from react and not from Digital Ocean space, Can you help me ..?
This image has an issue from server config so that its not render in your code, for example if you change the url to another server you will see the image result:
<img src={"https://i.ibb.co/28cc7z4/slide-inspiration.png"} />
This will work, but when I use your image you will receive this error:
(failed)net::ERR_CERT_COMMON_NAME_INVALID
And this error refer for more than one resone, but base on your link and when I try to visit it via browser, I see an issue on SSL certificate, so that I cant access image else if I press on advance button and click view image...
so what you can do is:
Ensure the Domain Has the Correct Certificate Installed
Check for Redirects and WWW vs. Non-WWW
Check for Misconfigured Redirects
I'am developing a blog website using react.js where users can post and comment ...
so we know that a user can comment with an image ,and let's say he want to upload a local image that stored in his machine,i want to display that image as a comment and save it into postgres database which i'am using for that.
My question is what are the steps that i should follow to achieve my purpose,thanks in advance.
If you have to do in simple steps, you can save the image to base64, its just string representation of an image. So it can be saved in DB directly and when you have to show it just decode the string and display it accordingly.
References :-
https://github.com/dankogai/js-base64#readme
https://scotch.io/tutorials/how-to-encode-and-decode-strings-with-base64-in-javascript
Alternatively, what you can do when user selects an image, then upload that image to your server and get the path to that(multipart file upload) and from path you can show it where you want to show.
References :-
how to send a multipart/form-data from React.js with an image?
I hope it helps, Thanks :)
am working on a project were on can make a post with image but when ever i try to view a single post both the user profile and the post image do not show up and i get this server error.
http://localhost:3000/post/uploads/1577964281132Screenshot_20200102-
104724.png 404
but am able to view it on this route.
http://localhost:3000/uploads/1577964281132Screenshot_20200102-
104724.png
on my express server i have this
app.use('/uploads' , express.static(path.join(__dirname , '/uploads')));
please is there any solution......
I did get the answer to problems all I had to do was had a forward slash(/) to the image src value 😑😑
So I am having a really weird problem. I'm not sure if it's my server thats is causing the problem or it's my react code. Right now I am trying to load an image using this code in my app:
<Image style={styles.image}
source={{uri:'http://www.test.com/admin/images/profile/'+this.props.active.bid+'.jpg'}}
/>
The link is a correct link and image displays if you go to the actual link, however in my app it doesn't display the image.
The file permissions on the image are 644 and I have 1 image working, however whenever I try to remove that image from the server or rename it to be the correct image for the 2nd profile it still shows up for the 1st profile and not the 2nd. If I delete the image the app still receives it for the 1st profile even though it shouldn't show up, if I go to the weblink the image doesn't appear.
Does anyone have any ideas?
To fix this problem you just have to reset the simulator.
To do this go to Simulator - > Reset Content and Settings...
This deletes all of the data on the device so beware if there is something on there that you cannot restore.