javascript - 使用 postgresql 从 url 加载图像，但只填充文本链接

Question

第一次使用 Postgresql 将 imageURL 存储在我的表中。我无法在我的 React 组件中渲染图片。在我的组件上，imageUrl 链接填充但不是实际图像本身。

我在 SQL 中将其标记为 TEXT，所以这可能就是问题所在(见下文)。

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
);

和

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

期望图片实际呈现而不是看到文本字符串 https://imgur.com/MH9quRL在网页上。

Answer 1

图像的 URL 可以是图像源、base64 字符串或 blob。 URL 重定向到不是有效图像源的网页，因此显然您不会获得图像(它不会显示任何内容)。所以在 Imgur 中，图片 URL 以 .jpg 结尾。这是你应该如何呈现它:(你只需要将'.jpg'附加到图像URL(仅适用于imgur)，Imgur已经设计了他们的网站，例如如果https://imgur.com/MH9quRL是网页，https://imgur.com/MH9quRL.jpg指向实际的 jpeg 图像。

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

一般来说，只需在图片末尾添加“.jpg”，或者不复制网页网址，而是复制以 .jpg 或 .png 或其他任何结尾的图片网址。