fix: image imports in public folder

This commit is contained in:
AP 2020-04-15 12:32:38 +02:00
parent 21d6b185aa
commit bcb683d379
4 changed files with 18 additions and 7 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 54 KiB

6
src/utils/basePath.tsx Normal file
View file

@ -0,0 +1,6 @@
import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();
const { basePath } = publicRuntimeConfig;
export const appendBasePath = (url: string): string => `${basePath}${url}`;

View file

@ -1,6 +1,7 @@
import React from 'react';
import styled, { keyframes } from 'styled-components';
import { fontColors, mediaWidths } from '../../styles/Themes';
import { appendBasePath } from '../../utils/basePath';
export const Headline = styled.div`
display: flex;
@ -35,7 +36,9 @@ const flicker = keyframes`
100% { opacity: 0; }
`;
const HeadlineImage = () => <img src={'/static/images/ThunderHub.svg'} />;
const HeadlineImage = () => (
<img src={appendBasePath('/static/images/ThunderHub.svg')} />
);
export const StyledImage = styled(HeadlineImage)`
width: 500px;

View file

@ -7,6 +7,7 @@ import {
TextSection,
} from './Sections.styled';
import { Text } from '../../../components/typography/Styled';
import { appendBasePath } from '../../../utils/basePath';
export const InfoSection = () => {
return (
@ -21,14 +22,16 @@ export const InfoSection = () => {
</Text>
</TextSection>
<ImageSection>
<ImagePlace src={'/static/images/Transactions.png'} />
<ImagePlace
src={appendBasePath('/static/images/Transactions.png')}
/>
</ImageSection>
</InfoRow>
</Section>
<Section padding={'48px 0'}>
<InfoRow reverse={true}>
<ImageSection>
<ImagePlace src={'/static/images/Transactions.png'} />
<ImagePlace src={appendBasePath('/static/images/Reports.png')} />
</ImageSection>
<TextSection>
<h2>Transaction Reports</h2>
@ -51,14 +54,14 @@ export const InfoSection = () => {
</Text>
</TextSection>
<ImageSection>
<ImagePlace src={'/static/images/Transactions.png'} />
<ImagePlace src={appendBasePath('/static/images/Channels.png')} />
</ImageSection>
</InfoRow>
</Section>
<Section padding={'48px 0'}>
<InfoRow reverse={true}>
<ImageSection>
<ImagePlace src={'/static/images/Transactions.png'} />
<ImagePlace src={appendBasePath('/static/images/Forwards.png')} />
</ImageSection>
<TextSection>
<h2>Forwarded Payments</h2>
@ -80,7 +83,7 @@ export const InfoSection = () => {
</Text>
</TextSection>
<ImageSection>
<ImagePlace src={'/static/images/Transactions.png'} />
<ImagePlace src={appendBasePath('/static/images/NightLight.png')} />
</ImageSection>
</InfoRow>
</Section>