image not working correctly with local image #700

kobe651jp · 2023-06-07T14:26:10Z

kobe651jp
Jun 7, 2023

A problem occurred while rendering the local image.

My code as follows

const MyTemplate = (
    <Html>
      <Head />
      <Preview>Join bukinoshita on Vercel</Preview>
      <Tailwind>
        <Section className='bg-white my-auto mx-auto font-sans'>
          <Container className='border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]'>
            <Section className='mt-[32px]'>
              <Text className='text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0'>
                <h2 className='text-4xl font-semibold text-indigo-500 text-center'>Image not working</h2>
              </Text>
            </Section>
            <Section className='mt-[32px]'>
              <Img
                src={`${baseUrl}/static/vercel-logo.png`}
                width='40'
                height='37'
                alt='Vercel'
                className='my-0 mx-auto'
              />
            </Section>
            <table
              className='mb-[26px]'
              border={0}
              cellPadding='0'
              cellSpacing='10'
              align='center'
            >
              <tr>
                <td
                  className='text-center'
                  align='left'
                  valign='middle'
                >
                  <Img
                    className='rounded-full'
                    src={`${baseUrl}/static/vercel-user.png`}
                    width='64'
                    height='64'
                  />
                </td>
                <td
                  className='text-center'
                  align='left'
                  valign='middle'
                >
                  <Img
                    src={`${baseUrl}/static/vercel-arrow.png`}
                    width='12'
                    height='9'
                    alt='invited you to'
                  />
                </td>
                <td
                  className='text-center'
                  align='left'
                  valign='middle'
                >
                  <Img
                    className='rounded-full'
                    src={`${baseUrl}/static/vercel-team.png`}
                    width='64'
                    height='64'
                  />
                </td>
              </tr>
            </table>
            <Img
              src={'/images/carousel-07.jpg'}
              alt='Cat'
              width='1000'
              height='800'
            />
            <Hr className='border-0 border-solid border-top border-[#eaeaea] my-[26px] mx-0 w-full' />
          </Container>
        </Section>
      </Tailwind>
    </Html>
  );

I received email as follows.

Is it possible to embed a local image into an email?

calbertan · 2023-10-26T22:07:13Z

calbertan
Oct 26, 2023

You will need to put your images in the static folder on the same level as your emails folder where you have all your Template. Right now, Next.js uses public and static is deprecated, so you will need to create a static folder if it's not there. You can then have the src be "/static/carousel-07.jpg".

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

image not working correctly with local image #700

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

image not working correctly with local image #700

Uh oh!

kobe651jp Jun 7, 2023

Replies: 1 comment

Uh oh!

Uh oh!

calbertan Oct 26, 2023

kobe651jp
Jun 7, 2023

calbertan
Oct 26, 2023