Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
114 views
in Technique[技术] by (71.8m points)

html - Generate a custom preview image based on parameters

When I share a link to a location on Google Maps, the link comes with a preview image of that location, like this:

screenshot of a preview image appearing when sharing a google maps link

From what I know, you can put a preview image as a tag in the section of a webpage, like this:

<meta property="og:image" content="example.png"/>

But this tag is static and there isn't really a way to make it dynamic. So how does Google Maps do it?

question from:https://stackoverflow.com/questions/65649548/generate-a-custom-preview-image-based-on-parameters

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Google might be doing something special, because they're Google, but it's definitely possible to make it dynamic server-side. If a sevrer renders a page using a template and knows something about the route it's rendering, it can swap out the image for another one or even generate it on the fly, for example as a base64 image as in this question.

An example of this using Jinja templates (for Python) would be <meta property="og:image" content="{{ map_location.thumbnail }}"/>. A more complex example using JavaScript template strings might be:

render(
  `
  <html>
  <!-- other content -->
  <meta property="og:image" content="/images/${request.parameters.id}.png"/>
  <!-- other content -->
  </html>
  `
)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...