In GitHub, adding images to your `README.md` file can enhance the visual appeal of your project documentation. Follow these steps:

1. **Upload Images to Your GitHub Repository**
   First, upload your image file to your GitHub repository. You can place it anywhere in the repository, but it's common to store images in a folder named `images` or `assets` for better organization.

2. **Get the Image URL**
   After uploading the image, click on the image file to open it in a new page. Then, right-click the image and select 'Copy Image Address' to obtain the URL.

3. **Edit the README.md File**
   In your `README.md` file, you can use Markdown syntax to insert images. The basic Markdown format is as follows:

   ```markdown
   ![alt text](URL)
   ```

   Here, "alt text" is the alternative text displayed when the image cannot be shown, and "URL" is the image address you copied in the previous step.

   Example:

   ```markdown
   ![Logo](https://github.com/username/repository/blob/main/images/logo.png)
   ```

   If you want the image to link to a URL (e.g., opening your website when clicking the image), wrap the image Markdown in a link Markdown:

   ```markdown
   [![Logo](https://github.com/username/repository/blob/main/images/logo.png)](https://yourwebsite.com)
   ```

4. **Adjust Image Size and Alignment**
   Markdown itself does not support direct image resizing, but you can use HTML tags to achieve this:

   ```markdown
   <img src="https://github.com/username/repository/blob/main/images/logo.png" alt="Logo" width="200">
   ```

   Here, `width="200"` sets the image width to 200 pixels. You can also use the `height` attribute to set the height.

   Aligning images typically requires using HTML `<p>` or `<div>` tags with the `align` attribute:

   ```markdown
   <p align="center">
     <img src="https://github.com/username/repository/blob/main/images/logo.png" alt="Logo" width="200">
   </p>
   ```

5. **Commit the Changes**
   After completing the edits, commit the changes to your `README.md` file. This will display the image on your project's homepage.

Follow these steps to add images to your `README.md` file and ensure the image links are publicly accessible so that anyone viewing your project can see the images.

How to add images to README.md on GitHub?

1个答案

你的答案