使用 Astro 在 GitHub 页面上渲染图像

Question

我正在尝试使用 Astro 创建一个小型测试站点并将其部署在 GitHub Pages 上。这是我第一次使用 Astro 并部署到 GitHub Pages。我已按照 Astro 网站上的说明部署网站，并查找了其他部署方法，但在渲染图像时仍然遇到问题。 图像根本不渲染，最多显示替代文本。

完整的存储库位于此处。

但是，为了简洁起见，较小的代码段位于此处。

GitHub 工作流程如下：

# Sample workflow for building and deploying an Astro site to GitHub Pages

name: Deploy Astro CI to GitHub Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: [ main ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Check out your repository using git
        uses: actions/checkout@v4

      - name: Setup and use Node 20
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build with Astro
        run: npm run build --if-present
      
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v3

目前，图像被引用为：

const GENPATH = "../../public/";

const project_data = [
    {
        id: 0,
        projectName: "Testimonial Grid Challenge",
        projectDescription:
            "Challenged by Front-end Mentor to build a testimonials grid section using HTML, CSS, and CSS Grid.",
        projectCreationDate: "December 8, 2022",
        projectHashTagCollection: [
            {
                tag: "#Web_Dev",
            },
        ],
        projectGitLink:
            "https://github.com/Mia703/FrontEnd-Mentor----Testimonials-Grid",
        projectLiveLink:
            "https://mia703.github.io/FrontEnd-Mentor----Testimonials-Grid/",
        projectImageCollection: [
            {
                image: GENPATH + "testimonials-1-desktop.png",
                alt: "Testimonial Grid Challenge - Desktop",
            },
            {
                image: GENPATH + "testimonials-2-tablet.png",
                alt: "Testimonial Grid Challenge - Tablet",
            },
            {
                image: GENPATH + "testimonials-3-mobile.png",
                alt: "Testimonial Grid Challenge - Mobile",
            },
        ],
    },
];

在 HTML 中，图像的放置方式如下：

<div class="project-gallery-container">
    {
        projectImageCollection.map((element) => (
            <img
                src={element.image}
                alt={element.alt}
                decoding="async"
                loading="lazy"
                class="gallery-item"
            />
        ))
    }
</div>

如果有任何关于此事的帮助，我将不胜感激。

Answer 1

在您的代码中，将

const GENPATH = "../../public/";

更改为

const GENPATH = "/test-project/";

基本属性： 如果您在

base="/test-project"

文件中设置

astro.config

（或等效地使用

--base=/test-project

运行构建），则对站点上的页面和资源的所有引用都必须以

"/test-project"

开头。

[文档（https://docs.astro.build/en/reference/configuration-reference/#base）介绍了

base

选项：

如果使用此选项，静态资产的所有导入和 URL 都应添加基数作为前缀。您可以通过

import.meta.env.BASE_URL

访问该值。

您可以对链接的 URL 执行此操作，例如在

nav_data.js

中，将“关于”的路径指定为

path: "/test-project/about/"

。

您应该对图像执行相同的操作。例如，您应该替换

image: "../../public/news-1-desktop.png",

与

image: "/test-project/news-1-desktop.png",

您使用

GENPATH

简化了这一过程。更换

const GENPATH = "../../public/";

与

const GENPATH = "/test-project/";

引用的文档表明，作为对基础进行硬编码的替代方案，您还可以使用

const GENPATH = import.meta.env.BASE_URL + "/";

在这种情况下，引用始终反映配置的基本值。

构建过程： 该网站使用 Astro 的 DEV 模式（以

npm run dev

开头），但 Astro 发出警告，URL 不应以

/public

开头。

在部署中找不到图像并不是 GitHub Pages 所特有的。效果与本地构建相同。

npm run build
npm run preview