如何在shepherd.js步骤中添加图片？直接插入img标签未生效

你遇到的问题是因为Shepherd.js的text属性默认不直接接受React JSX元素，它支持HTML字符串、原生DOM元素或者返回DOM的函数。下面提供两种可行的解决方法：

方法1：使用HTML字符串 #

直接将图片标签以字符串形式传入text字段，Shepherd会自动解析HTML内容：

export const journalSteps = [
  {
    id: 'intro',
    title: 'Welcome Nahid',
    // 改用HTML字符串形式的img标签
    text: '<img alt="tour.png" src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png" />',
    attachTo: {
      element: '.journal-tour-start-point',
      on: 'right'
    },
    cancelIcon: {
      enabled: true
    },
    buttons: [
      {
        classes: backBtnClass,
        text: 'Back',
        type: 'back'
      },
      {
        classes: nextBtnClass,
        text: 'Next',
        type: 'next',
        next: function () {
          instance.hide();
        }
      }
    ],
    classes: 'tour-test-class-1'
  },
  {
    title: 'Please Click on Step 2',
    attachTo: {
      element: '.first-step-62',
      on: 'left'
    },
    cancelIcon: {
      enabled: true
    },
    buttons: [
      {
        classes: backBtnClass,
        text: 'Back',
        type: 'back'
      },
      {
        classes: nextBtnClass,
        text: 'Next',
        type: 'next'
      }
    ],
    // 给第二个步骤添加图片示例
    text: ['Please Click On .', '<img alt="step2-img" src="你的步骤2图片地址" />']
  }
];

方法2：使用React渲染函数（更符合React生态） #

Shepherd.js支持通过render选项自定义步骤内容，直接返回React元素：

import React from 'react';

export const journalSteps = [
  {
    id: 'intro',
    title: 'Welcome Nahid',
    // 使用render返回React元素
    render: () => (
      <div>
        <img
          alt="tour.png"
          src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
        />
      </div>
    ),
    attachTo: {
      element: '.journal-tour-start-point',
      on: 'right'
    },
    cancelIcon: {
      enabled: true
    },
    buttons: [
      {
        classes: backBtnClass,
        text: 'Back',
        type: 'back'
      },
      {
        classes: nextBtnClass,
        text: 'Next',
        type: 'next',
        next: function () {
          instance.hide();
        }
      }
    ],
    classes: 'tour-test-class-1'
  },
  {
    title: 'Please Click on Step 2',
    attachTo: {
      element: '.first-step-62',
      on: 'left'
    },
    cancelIcon: {
      enabled: true
    },
    buttons: [
      {
        classes: backBtnClass,
        text: 'Back',
        type: 'back'
      },
      {
        classes: nextBtnClass,
        text: 'Next',
        type: 'next'
      }
    ],
    render: () => (
      <div>
        <p>Please Click On .</p>
        <img alt="step2-img" src="你的步骤2图片地址" />
      </div>
    )
  }
];

注意事项 #

• 使用HTML字符串时，要确保图片地址可访问，若内容来自用户输入需注意XSS风险。
• 使用render方法可自由组合React组件与元素，更灵活地定制步骤内容。

内容的提问来源于stack exchange，提问作者Nahiduzzaman