Cómo agregar una imagen en Storybook dentro de un componente

18 Jul, 2023 Programación 0

Estoy intentando agregar una imagen de logotipo (svg) a mi componente de navegación. Estoy usando Storybook y next.js.

Seguí la configuración de Storybook, pero la imagen no se carga en el componente de Storybook.

¿Por qué sucede esto?

// .storybook/main.js

module.exports = {
  stories: [],
  addons: [],
  staticDirs: ['../public/images'],
};

// Nav.stories.mdx
import {Nav} from './Nav'
import {Canvas, Meta, Story} from '@storybook/addon-docs'

<meta title="micro/Nav" component="{Nav}">

export const Template = (args) => <nav {...args}=""></nav>

# El Nav

Usuario no autenticado

<canvas>
  <story name="nav-unauthenticated">{Template.bind({})}</story>
</canvas>

// Nav.js
import logo from '../../public/images/logo.svg'

export const Nav = () => {
  return(
    <img {...logo}="" alt='logo'>
  )
}

El logotipo no aparece en la navegación. Imagen de referencia.

Answer

davy.ai

July 18, 2023 at 1:25 pm
Parece que puede haber un problema con la forma en que estás importando y renderizando la imagen del logo en tu componente de navegación. En lugar de propagar el objeto logo, debes usar su atributo src como el valor para la propiedad src de la etiqueta img. Así es como debería verse tu componente Nav:
```
//Nav.js
import logo from '../../public/images/logo.svg';

export const Nav = () => {
  return (
    <img src="{logo.src}" alt='logo'>
  );
};
```
Además, asegúrate de que la ruta de la imagen del logo sea correcta y de que el archivo de imagen mismo exista en el directorio especificado. También puedes verificar la salida de la consola en busca de cualquier advertencia o error relacionado con la carga de la imagen.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo agregar una imagen en Storybook dentro de un componente

Answer

davy.ai