react标记图片_如何使用元标记将显示图像添加到React应用

最新推荐文章于 2024-08-16 08:42:26 发布

weixin_26738395

最新推荐文章于 2024-08-16 08:42:26 发布

阅读量529

点赞数

文章标签： python react 计算机视觉 opencv java

原文链接：https://medium.com/@weberzt/how-to-add-a-display-image-to-your-react-app-using-meta-tags-1b84fd50f57

版权

react标记图片

As I readied my social media profiles for my current job search, I wanted to add a link to my app MyParks Explorer to the featured section of my LinkedIn profile. As soon as I did this, I was met with this abomination:

在为当前的工作搜索准备社交媒体个人资料时，我想将指向我的应用程序MyParks Explorer的链接添加到LinkedIn 个人资料的精选部分。一旦我做到了，我就遭到了这种可憎的：

问题 (The Problem)

Being a highly visual person, this gray default image wasn’t going to fly for me, especially not on something as important as my LinkedIn profile. Due to the fact that I’d never posted a link to my app anywhere that a display image would be shown, I didn’t even know how to begin to fix the issue. After quite a lot of googling, head banging, and trial and error, I found the right fix!

作为一个高度视觉化的人，这张灰色的默认图像不会帮我飞，尤其是在不像我的LinkedIn个人资料那么重要的事情上。由于我从未在会显示显示图像的任何地方发布过指向应用程序的链接，所以我什至不知道如何开始解决该问题。经过大量的谷歌搜索，头部撞撞和反复试验后，我找到了正确的解决方法！

解决方案 (The Solution)

The fix for this problem lies in meta tags. If you’re anything like me, you may be wondering what that even is. If that’s the case, here’s what w3schools has to say about them:

解决此问题的方法是使用元标记。如果您像我一样，可能会想知道那是什么。如果是这样， w3schools必须对他们说些什么：

The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.

< meta >标记定义有关HTML文档的元数据。元数据是有关数据的数据(信息)。

<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.

<meta>标记始终位于<head>元素内，通常用于指定字符集，页面描述，关键字，文档作者和视口设置。

Metadata will not be displayed on the page, but is machine parsable.

元数据将不会显示在页面上，但是可以在计算机上解析。

Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.

浏览器(如何显示内容或重新加载页面)，搜索引擎(关键字)和其他Web服务都使用元数据。

There is a method to let web designers take control over the viewport (the user’s visible area of a web page), through the <meta> tag

有一种方法可以让Web设计人员通过<meta>标签来控制视口(用户在网页上的可见区域)

In other words, meta tags are used to convey information (i.e. name, description, featured image, etc.) about your app to web browsers and search engines. By that definition, it makes sense that a meta tag would be used to house the image you want displayed for your app. Luckily, once I found this missing piece of the puzzle, getting the image added and rendering was pretty simple!

换句话说，元标记用于将有关您的应用程序的信息(即名称，描述，特色图片等)传达到Web浏览器和搜索引擎。根据该定义，有意义的是，将使用元标记来容纳要为应用显示的图像。幸运的是，一旦我发现了这个难题的缺失部分，添加图像并进行渲染就非常简单！

Go to the index.html file in your public folder
前往index.html文件在你的public文件夹
Within the <head> tag, add a <meta> tag withproperty equal to “og:image” like this: property=”og:image”
在<head>标记内，添加一个property等于“og:image”的<meta>标记，如下所示： property=”og:image”
After the property attribute, add a content attribute followed by either a hyperlink to the image you want displayed or a route to your desired image that’s already been imported into your project: content=”%PUBLIC_URL%/Olympic.jpg” or content=”https://photos.com/uploads/nature/Olympic.jpg"
在property属性之后，添加content属性，后跟要显示的图像的超链接或已导入到项目中的所需图像的路由： content=”%PUBLIC_URL%/Olympic.jpg”或content=”https://photos.com/uploads/nature/Olympic.jpg"
The final product should look something like this: <meta property="og:image" content=”%PUBLIC_URL%/Olympic.jpg” />
最终产品应如下所示： <meta property="og:image" content=”%PUBLIC_URL%/Olympic.jpg” />
Run npm run build
运行npm run build
And all that should result in this:
所有这些都将导致以下结果：

奖金 (Bonus)

You may have scratched your head when you saw “og:image” above. OG stands for Open Graph, which is a protocol developed by Facebook that allows you to control how URLs are displayed when shared on social media. Read more on that here.

当您在上方看到“og:image”时，可能会“og:image” 。 OG代表Open Graph，这是Facebook开发的协议，可让您控制在社交媒体上共享时如何显示URL。在这里阅读更多。