使用 postgresql 从 url 加载图像，但仅填充文本链接答案

【问题标题】：Using postgresql to load image from a url, but only populates the text link使用 postgresql 从 url 加载图像，但仅填充文本链接
【发布时间】：2019-12-12 14:51:00
【问题描述】：

第一次使用 Postgresql 将 imageURL 存储在我的表中。我无法在我的反应组件中渲染图片。在我的组件上，会填充 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。

【问题讨论】：

欢迎来到俱乐部。请更新您的查询：这与postgresql 无关，因为这部分工作正常。描述 react 部分代码。

标签： javascript reactjs postgresql imageurl

【解决方案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”添加到图像末尾，或者不复制网页 URL，而是复制以 .jpg 或 .png 或其他格式结尾的图像 URL。

【讨论】：

点个赞/打勾，让其他人可以参考