如何用modal和image显示相同的链接源？

使用modal和image显示相同的链接源可以通过以下步骤实现：

首先，确保你已经引入了合适的前端框架，比如React、Vue或者Bootstrap等，以便使用modal和image组件。
创建一个按钮或者其他触发元素，当用户点击时触发modal的显示。
在点击事件的处理函数中，获取要显示的链接源。
在modal组件中，使用一个input或者textarea元素来显示链接源。将获取到的链接源赋值给该元素的value属性。
在modal组件中，使用一个image元素来显示链接源的预览图。将获取到的链接源赋值给该元素的src属性。
在modal组件中，使用合适的样式和布局来美化modal的显示效果。
最后，将modal组件添加到页面中，并设置合适的触发条件，比如点击按钮时显示modal。

下面是一个示例代码，使用React框架和Bootstrap样式库来实现上述功能：

import React, { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';

const LinkModal = () => {
  const [showModal, setShowModal] = useState(false);
  const linkSource = 'https://example.com'; // 替换为实际的链接源

  const handleShowModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  return (
    <>
      <Button variant="primary" onClick={handleShowModal}>
        打开Modal
      </Button>

      <Modal show={showModal} onHide={handleCloseModal}>
        <Modal.Header closeButton>
          <Modal.Title>链接源</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <input type="text" className="form-control" value={linkSource} readOnly />
          <img src={linkSource} alt="链接源预览图" className="img-fluid" />
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleCloseModal}>
            关闭
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default LinkModal;

在上述示例代码中，我们使用了React的useState钩子来管理modal的显示状态。点击按钮时，调用handleShowModal函数来显示modal，点击modal的关闭按钮或者背景时，调用handleCloseModal函数来关闭modal。链接源使用linkSource变量来存储，可以根据实际情况进行替换。在modal的内容中，使用input元素来显示链接源，使用img元素来显示链接源的预览图。