Descargo de responsabilidad: Este artículo se generó mediante traducción automática.

Añadir imágenes a los artículos

Prev Next

Planes que apoyan la adición de imágenes a los artículos

Profesional
Negocio
Empresa






Agregar imágenes a sus artículos mejora la comprensión y el compromiso. Las ayudas visuales aclaran procedimientos complejos e ilustran los resultados deseados de manera más efectiva que el texto solo. Las imágenes simplifican las instrucciones, haciéndolas más fáciles de seguir y entender. Mejoran la experiencia del usuario y contribuyen a la eficacia general de la documentación.

Existen varios métodos para insertar imágenes en sus artículos utilizando el editor Markdown o el editor WYSIWYG avanzado. Cada método ofrece su propio conjunto de ventajas y permite la personalización para adaptarse a sus preferencias.


Insertar una imagen en el editor de Markdown

Puede insertar imágenes en su documentación con el editor de Markdown en cuatro métodos:

Método 1: Insertar imagen desde Upload/URL

Método 2: Insertar imagen desde el selector de archivos

Método 3: Insertar imagen usando Insertar archivo ()

Método 4: Insertar imagen arrastrando y soltando

Uso de la carga

Para insertar una imagen:

  1. Navegue hasta el artículo deseado en el editor de Markdown.

  2. Haga clic en el icono Insertar imagen () y seleccione Desde carga/URL.

  3. En la pestaña Archivo , haga clic en el botón Elegir archivo .

  4. Seleccione el archivo de imagen que desee de su almacenamiento local y haga clic en Abrir.

  5. En el campo Descripción , escriba una descripción para la imagen.

  6. Haga clic en Aceptar.

    La imagen se insertará en el artículo donde se coloca el cursor.

NOTA

La altura y la anchura de la imagen no se establecerán de forma predeterminada {height="" width=""}.

  1. Si es necesario, puede especificar las dimensiones en píxeles (px) para mostrar la imagen en la documentación.

Por ejemplo, {height="720" width="1280"}.

Puede ver el tamaño de la imagen en la documentación en la ventana Vista previa.

Adding images in the Markdown and Advanced WYSIWYG editors

URL de origen

Para insertar una imagen mediante una URL:

  1. Navegue hasta el artículo deseado en el editor de Markdown.

  2. Haga clic en el icono Insertar imagen () y seleccione Desde carga/URL.

  3. En la pestaña URL , introduzca la URL de la imagen que desee.

  4. En el campo Descripción , escriba una descripción para la imagen.

  5. Haga clic en Aceptar.
    La imagen se insertará en el artículo donde se coloca el cursor.

NOTA

La altura y la anchura de la imagen no se establecerán de forma predeterminada {height="" width=""}.

  1. Si es necesario, puede especificar las dimensiones en píxeles (px) para mostrar la imagen en la documentación.

Por ejemplo, {height="720" width="1280"}.

Puede ver el tamaño de la imagen en la documentación en la ventana Vista previa.

Adding images in the Markdown and Advanced WYSIWYG editors  

NOTA

Le recomendamos que añada imágenes a Document360 Drive y, a continuación, las inserte en los artículos. Al cargar con la URL de la imagen, si la imagen se quita o se le cambia el nombre en el futuro, aparecerá rota en los sitios de la base de conocimientos.

Para insertar una imagen desde el selector de archivos:

  1. Navegue hasta el artículo deseado en el editor de Markdown.

  2. Haga clic en el icono Insertar imagen () y seleccione Del selector de archivos.

    La ventana de Drive aparecerá solo con archivos en formato de imagen.

NOTA

Puede insertar cualquier número de imágenes de una sola vez. La selección múltiple de imágenes solo está disponible en los editores Markdown y WYSIWYG avanzados.

  1. Navegue hasta la carpeta deseada donde está disponible la imagen que desea cargar.

  2. Seleccione la(s) imagen(es) deseada(s) y haga clic en Insertar.
    La imagen se insertará en el artículo donde se coloca el cursor.

  3. Si es necesario, puede especificar las dimensiones en píxeles (px) para mostrar la imagen en la documentación.

Por ejemplo, {height="720" width="1280"}.

Puede ver el tamaño de la imagen en la documentación en la ventana Vista previa.

Adding images in the Markdown and Advanced WYSIWYG editors

Para insertar una imagen utilizando el archivo Insertar ():

  1. Navegue hasta el artículo deseado en el editor de Markdown.

  2. Haga clic en el icono Insertar archivo ().

    Aparecerá el panel Drive .

  3. Navegue hasta la carpeta deseada donde está disponible la imagen que desea cargar.

  4. Seleccione la imagen y haga clic en Insertar.
    La imagen se insertará en el artículo donde se coloca el cursor.

NOTA

La altura y la anchura de la imagen no se establecerán de forma predeterminada {height="" width=""}.

  1. Si es necesario, puede especificar las dimensiones en píxeles (px) para mostrar la imagen en la documentación.

Por ejemplo, {height="720" width="1280"}.

Puede ver el tamaño de la imagen en la documentación en la ventana Vista previa.

Adding images in the Markdown and Advanced WYSIWYG editors

Puede agregar una imagen al editor arrastrándola desde su sistema local a su editor.

Las imágenes que inserte en un artículo mediante la función de arrastrar y soltar se guardarán automáticamente en Document360 Drive. Cualquier cambio realizado en su archivo local no afectará a la imagen insertada.


Insertar una imagen en el editor WYSIWYG avanzado

Puede insertar imágenes en su documentación utilizando el editor WYSIWYG avanzado a través de los siguientes métodos:

  1. Método 1: Usar el menú de inserción rápida

  2. Método 2: Usar el comando Barra diagonal

  3. Método 3: Usar Copiar y pegar o Arrastrar y soltar

Para agregar una imagen usando el menú de inserción rápida :

  1. Navegue hasta el artículo deseado en el editor WYSIWYG avanzado.

    El menú de inserción rápida aparecerá solo cuando el bloque esté vacío.

  2. Haga clic en el icono Imagen () en el menú de inserción rápida .

  3. Aparecerá un panel Insertar imagen con las siguientes opciones:

    • Cargar desde mi dispositivo: cargue o arrastre y suelte un archivo de imagen desde el almacenamiento local de su dispositivo.

    • Elegir de Drive: seleccione una imagen de su unidad de Document360 mediante el selector de archivos.

    • URL externa: pegue la URL de la imagen en el campo proporcionado.

  4. Haga clic en Insertar para agregar la imagen al artículo.

NOTA

  • El menú de inserción rápida desaparecerá automáticamente una vez que comience a escribir en el bloque.

  • Si borra el contenido del bloque, el menú de inserción rápida volverá a aparecer para su reutilización.

An image from the Quick insert menu is added to the Advanced WYSIWYG editor.

Para agregar una imagen con el comando Barra diagonal/:

  1. Navegue hasta el artículo deseado en el editor WYSIWYG avanzado.

  2. Escriba /image y presione Enter para abrir el panel de opciones de imagen.

  3. Elija una de las siguientes opciones:

    • Cargar desde mi dispositivo: cargue o arrastre y suelte un archivo de imagen desde el almacenamiento local de su dispositivo.

    • Elegir en Drive: seleccione una imagen de Document360 Drive.

    • URL externa: pegue la URL de la imagen en el campo proporcionado.

  4. Haga clic en Insertar para agregar la imagen al artículo.

An image from the Slash command is added to the Advanced WYSIWYG editor.

Puedes añadir imágenes a tu artículo copiándolas y pegándolas o simplemente arrastrándolas y soltándolas en el editor:

  1. Realizar una operación de copiar y pegar para colocar la imagen en el editor.

  2. Arrastrar y soltar una imagen directamente en el editor desde el almacenamiento local de su dispositivo.

NOTA

  • Las imágenes insertadas mediante la función de arrastrar y soltar se guardan automáticamente en Document360 Drive. Los cambios realizados en el archivo de imagen en su dispositivo local no afectarán a la imagen en el editor.

NOTA

Puede formatear imágenes en el editor WYSIWYG avanzado. Para obtener más información, lea el artículo sobre Image formatting in the advanced WYSIWYG editor.


Solución de problemas

Imagen rota en el sitio de la base de conocimientos

Una imagen rota es una imagen que no se carga en una página web, mostrando un icono de imagen faltante y su texto alternativo en su lugar. Esto suele ocurrir cuando el archivo de imagen se elimina, se mueve, se cambia de nombre o cuando la URL que apunta a la imagen es incorrecta o inaccesible.

Pasos para resolverlo:

  1. Recupere la dirección URL de la imagen de la vista de código del artículo en el portal de la base de conocimientos o inspeccionando el elemento en el sitio de la base de conocimientos.

  2. Abra la URL de la imagen en un navegador.

  3. Si se produce un error 404, es posible que la imagen se haya eliminado, movido o renombrado.

  4. Asegúrese de que el archivo de imagen siga existiendo en la misma ruta y con el mismo nombre.

  5. Como práctica recomendada:

    1. Cargue imágenes directamente en Document360 Drive en lugar de utilizar URL externas.

    2. La adición de imágenes desde Document360 Drive ayuda a organizar los activos de forma eficiente y evita que las imágenes se rompan en el futuro.

Document360 Knowledge base site appearing with a broken image


Preguntas frecuentes

¿Puedo cambiar la alineación de una imagen en Markdown?

Sí, puede cambiar la alineación de la imagen en Markdown.

NOTA

Para obtener más información, lea el artículo sobre ¿Cómo alinear la imagen en Markdown?

¿Cuál es el método recomendado para insertar imágenes en los artículos?

El método recomendado es cargar imágenes en Document360 Drive e insertarlas directamente en los artículos. Esto garantiza la estabilidad de la imagen y evita que se rompan los enlaces de imagen si la imagen se elimina o se cambia de nombre en el futuro.

¿Puedo personalizar la apariencia de las imágenes insertadas?

Sí, puede personalizar la alineación, el tamaño y el estilo de las imágenes insertadas para que se adapten a sus preferencias y optimizar la presentación visual dentro de sus artículos.

¿Cómo puedo garantizar la accesibilidad para los usuarios con discapacidad visual al añadir imágenes?

Puede proporcionar texto alternativo (texto alternativo) para cada imagen, lo que ayuda a las herramientas de lectura de pantalla a describir las imágenes a los usuarios con discapacidad visual y mejora la optimización de motores de búsqueda (SEO) para su base de conocimientos.

¿Cómo puedo añadir iconos en línea con el texto?

Para añadir iconos en el editor de markdowns, sólo tienes que pegar el fragmento de código HTML del icono donde quieras que aparezca en el texto. Por ejemplo, utilícelo <nor class="fa-light fa-comment"></nor> para un icono de comentario.

Si está utilizando el editor WYSIWYG avanzado, coloque el cursor donde desee el icono, cambie a la vista de código y pegue el mismo fragmento de código HTML. Después de pegarlo, guarde el archivo y vuelva a la vista normal. Ahora debería ver el icono en línea con su texto. Puedes encontrar estos fragmentos de iconos en sitios web como FontAwesome.

¿Se almacenarán de forma permanente las imágenes copiadas de un origen externo y pegadas en Document360? ¿Qué sucede si se elimina la fuente externa?

Si copia y pega imágenes de una fuente externa en Document360, se almacenarán en Document360 Drive. Sin embargo, te recomendamos que subas las imágenes directamente desde Drive en lugar de pegarlas.

Si se añaden imágenes mediante un enlace externo y se elimina la fuente original, las imágenes se interrumpirán en Document360.