use*_*274 1 javascript reactjs next.js
我在降价文件中有以下前端问题。
---
title: "Hello world!"
excerpt: "Lorem ipsum dolor sit amet"
coverImage: "/assets/blog/hello-world/cover.png"
date: "2020-03-16T05:35:07.322Z"
author:
name: Mario
picture: "/assets/blog/authors/mario.png"
ogImage:
url: "/assets/blog/hello-world/cover.png"
---
我需要将图像的完整 url 传递给 twitter card metatwitter: image和 open graph metaproperty = "og: image"
为此，我需要获取站点的基本 url 以将其用作我通过前端获取的图像路径的前缀
<Head>
{/* Twitter */}
...
<meta name="twitter:image" content={data.ogImage.url} />
{/* Open Graph */}
...
<meta property="og:url" content={``} key="ogurl" />
<meta property="og:image" content={data.ogImage.url} key="ogimage" />
</Head>
现在data.ogImage.url有这个值，/assets/blog/hello-world/cover.png但为了工作，我需要在这个输出前面加上站点基本 url
如何在nextjs中获取网站的基本网址？
有几种方法可以实现这样的事情：
在env文件中创建您的基本 URL并通过proccess.env （这可能有助于这种方法）引用它。
该.env文件：
// .env
REACT_APP_BASE_URL=http://example.com/
该index文件：
// .env
REACT_APP_BASE_URL=http://example.com/
使用相对路径，在这种方法中，您应该使用像这样工作的图像相对路径（这可能会有所帮助）：
假设我们有以下结构：
--src
|--assets
|--images
|--image.png
--index
如果我们在索引文件中，我们将像这样引用该图像：
<!-- index -->
<meta property="og:image" content={`${process.env.BASE_URL}${data.ogImage.url}`} key="ogimage" />
使用 javascript 内置方法，如window.location. 要访问基本 URL，我们可以origin像这样从中获取属性：（window.location.origin 在next.js 此使用此方法可能会有所帮助）。
--src
|--assets
|--images
|--image.png
--index
注意：正如@AlexeiLevenkov 在评论中提到的，因为您要求提供图像的完整路径，所以最好的方法是坚持使用第一种方法。
| 归档时间： |
|
| 查看次数： |
1707 次 |
| 最近记录： |