Using postgresql to load image from a url, but only populates the text link

Question

first time using Postgresql to store imageURL in my table. I am unable to have the picture render in my react component. on my component, the imageUrl link populates but not the actual image itself.

I've labeled it as TEXT in SQL so maybe that's the problem(see below).

DROP TABLE IF EXISTS heroes;

CREATE TABLE
IF NOT EXISTS heroes
(
  id int GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  heroName TEXT,
  realName TEXT,
  imageUrl TEXT
);

and

INSERT INTO heroes
    (heroName, realName,imageUrl)
VALUES
    ('Batman', 'Bruce Wayne', 'https://i.sstatic.net/kPNrE.jpg'),
    ('Nightwing', 'Richard Grayson', 'https://i.sstatic.net/kPNrE.jpg'),
    ('Red Hood', 'Jason Todd', 'https://i.sstatic.net/kPNrE.jpg'),
    ('Robin', 'Tim Drake', 'https://i.sstatic.net/kPNrE.jpg'),
    ('Batgirl', 'Barbara Gordon', 'https://i.sstatic.net/kPNrE.jpg'),
    ('Orphan', 'Cassandra Cain', 'https://i.sstatic.net/kPNrE.jpg'),
    ('Huntress', 'Helena Bertinelli', 'https://i.sstatic.net/kPNrE.jpg');

Expected a picture to actually render instead of seeing the text string https://i.sstatic.net/kPNrE.jpg on the webpage.

welcome to the club. Please update your query: it's not about postgresql since this part works correct. Describe react part of your code. — Yasen
– Yasen, Commented Aug 5, 2019 at 5:25

Narasimha Prasanna HN · Accepted Answer · 2019-08-05 05:29:09Z

1

The URL for image can be an image source, a base64 string or a blob. The URL redirects to a web page not a valid image source, so obviously you won't get an image , (it won't display anything). So in Imgur, the image URL ends with .jpg. Here is how you should render it : (You just need to append '.jpg' to image URL (only for imgur), Imgur has designed their website like that, for example if https://i.sstatic.net/kPNrE.jpg is the webpage, https://i.sstatic.net/kPNrE.jpg.jpg points to the actual jpeg image.

var imgURL = imgURL  + ".jpg"
//render it :
return (
   <img src = {imgURL} />
)

In general, just add '.jpg' to end of the image, or instead of copying the webpage URL, copy the image URL, that ends with .jpg or .png or whatever.

answered Aug 5, 2019 at 5:29

Narasimha Prasanna HN

6626 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Narasimha Prasanna HN Over a year ago

Give an upvote / tick, so that others can refer this

Collectives™ on Stack Overflow

Using postgresql to load image from a url, but only populates the text link

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related