React Router 如何为 Twitter Cards 显示直接图像

Question

在我的 React 单页应用程序中，我尝试设置值

<meta name="twitter:image" content="https://kareriadventure.in/nature2.jpg" />

但是，即使图像位于我的公共文件夹中，它也不会显示。

我已经尝试将它放在一个组件中，并在 React Router 中为其添加一个路由

<Header />
          <div className="container">
            <Route path="/" exact component={Slideshow} />
            <Route path="/about" component={About}/>
            <Route path="/trekking" component={Trekking}/>
            <Route path="/camping" component={Camping}/>
            <Route path="/homestay" component={Homestay}/>
            <Route path="/services" component={Services}/>
            <Route path="/contact" component={Contact}/>


            ***<Route path="/Twittercardimage component={Twittercardimage}/>***

          </div>
    <Footer />

但是，这会将图像包装在我的页眉和页脚组件中。

我错过了什么吗？

然后我想在 React Router 中检查当前路由（但无法弄清楚如何在不进入 State 的情况下执行此操作）并输入 If Then，因此如果当前路由是 /Twittercardimage 则不要显示页眉和页脚组件。

但后来我停了下来，因为这似乎太复杂了，无法简单地链接到我网站上的图片。

如何在 create-react-app 简单的反应应用程序中设置我的 Twittercard 图像？

这是一个非常简单的功能。使用 React Router 我只想转到我的 url/image.jpg 并显示 jpg，而没有按照上述设置在所有其他路由中显示的页眉和页脚。

Answer 1

我想通了。基本上我在考虑网站的绝对网址，但这不是这样做的，需要一个相对网址，如下所示：

import TwitterImage from './images/slideshow1.jpg';
import FacebookImage from './images/slideshow2.jpg';

<meta property="og:image" content={FacebookImage} />
<meta name="twitter:image" content={TwitterImage} />

其实这并不是一个特例，只是简单的说如何在create-react-app中添加图片，这里有描述： Create-Read_App adding images

当我做一个页面查看源时，我得到了这个

所以图像被完美地添加了。

如何在单页反应 SPA 中显示没有页眉和页脚的组件，它有一个页眉和页脚，尚未得到回答，并且是一个 react-router 的东西，但是既然我已经解决了我的问题，我会让暂时就这样吧！

Answer 2

如果您使用的是 webpack，请尝试导入您的图像，例如

<img src={require('/foo.jpeg')} />