2

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.stack.imgur.com/kPNrE.jpg'),
    ('Nightwing', 'Richard Grayson', 'https://i.stack.imgur.com/kPNrE.jpg'),
    ('Red Hood', 'Jason Todd', 'https://i.stack.imgur.com/kPNrE.jpg'),
    ('Robin', 'Tim Drake', 'https://i.stack.imgur.com/kPNrE.jpg'),
    ('Batgirl', 'Barbara Gordon', 'https://i.stack.imgur.com/kPNrE.jpg'),
    ('Orphan', 'Cassandra Cain', 'https://i.stack.imgur.com/kPNrE.jpg'),
    ('Huntress', 'Helena Bertinelli', 'https://i.stack.imgur.com/kPNrE.jpg');

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

redbird48
  • 21
  • 2
  • 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 Aug 05 '19 at 05:25

1 Answers1

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.stack.imgur.com/kPNrE.jpg is the webpage, https://i.stack.imgur.com/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.

Narasimha Prasanna HN
  • 661
  • 5
  • 14