如何使用 Next.js 将 PNG 徽标添加到 Tailwind CSS 导航栏？

Posted 2023-03-07

【中文标题】如何使用 Next.js 将 PNG 徽标添加到 Tailwind CSS 导航栏？

【英文标题】：How to add a PNG logo to Tailwind CSS navbar using Next.js?

【发布时间】：2021-10-08 21:01:48

【问题描述】：

这是代码，我想添加一个 PNG 徽标来代替 SVG 徽标，但每次我添加一个 img 元素时，都不会渲染任何内容。 我要添加的图像/徽标必须与 SVG 徽标大小差不多。

import Link from 'next/link';
    import  useState  from 'react';
    
    export const Navbar = () => 
      const [active, setActive] = useState(false);
    
      const handleClick = () => 
        setActive(!active);
      ;
    
      return (
        <>
          <nav className='flex items-center flex-wrap bg-green-400 p-3 '>
            <Link href='/'>
              <a className='inline-flex items-center p-2 mr-4 '>
                <svg
                  viewBox='0 0 24 24'
                  xmlns='http://www.w3.org/2000/svg'
                  className='fill-current text-white h-8 w-8 mr-2'
                >
                  <path d='M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z' />
                </svg>
                <span className='text-xl text-white font-bold uppercase tracking-wide'>
                  Talwind CSS
                </span>
              </a>
            </Link>
            <button
              className=' inline-flex p-3 hover:bg-green-600 rounded lg:hidden text-white ml-auto hover:text-white outline-none'
              onClick=handleClick
            >
              <svg
                className='w-6 h-6'
                fill='none'
                stroke='currentColor'
                viewBox='0 0 24 24'
                xmlns='http://www.w3.org/2000/svg'
              >
                <path
                  strokeLinecap='round'
                  strokeLinejoin='round'
                  strokeWidth=2
                  d='M4 6h16M4 12h16M4 18h16'
                />
              </svg>
            </button>
            /*Note that in this div we will use a ternary operator to decide whether or not to display the content of the div  */
            <div
              className=`$
                active ? '' : 'hidden'
                 w-full lg:inline-flex lg:flex-grow lg:w-auto`
            >
              <div className='lg:inline-flex lg:flex-row lg:ml-auto lg:w-auto w-full lg:items-center items-start  flex flex-col lg:h-auto'>
                <Link href='/'>
                  <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white '>
                    Home
                  </a>
                </Link>
                <Link href='/'>
                  <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white'>
                    Services
                  </a>
                </Link>
                <Link href='/'>
                  <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white'>
                    About us
                  </a>
                </Link>
                <Link href='/'>
                  <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white'>
                    Contact us
                  </a>
                </Link>
              </div>
            </div>
          </nav>
        </>
      );
    ;

如果可能，请链接一个很好的类似示例。

【问题讨论】：

你能把你的例子img标签贴在你要替换svg的地方吗？

【参考方案1】：

使用 next/image，这些是一些示例。

Layout = fill
code - https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/layout-fill.js
preview - https://image-component.nextjs.gallery/layout-fill

Layout = fixed
code - https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/layout-fixed.js
preview - https://image-component.nextjs.gallery/layout-fixed

Layout = responsive
code - https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/layout-responsive.js
preview - https://image-component.nextjs.gallery/layout-responsive