Azure SWA - 未找到 Nextjs 图像

Question

我正在尝试在 Azure 的静态 Web 应用程序服务上部署 Next JS 应用程序。我已经构建并运行了应用程序，但图像未渲染。从控制台，它报告 404 未找到错误。

GET https://{url}.4.azurestaticapps.net/_next/image?url=%2Fimages%2Ficon%2FMessage.png&w=48&q=75 404（未找到）

<Image
  src="/images/icon/Message.png"
  alt="message"
  width={20}
  height={20}
  loading="lazy"
/>

我的文件夹结构是：

- app
  - (public)
    - page.tsx
- public
  - images
    - icon
      - Message.png

我知道文件在那里，因为我有一些 CSS 可以正确渲染我的一张图像。

  const divStyle = {
    Width: '100%',
    backgroundImage: `url('/images/banner/banner-03.png')`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center center',
  }

{
  "name": "daisy-nextjs-setup",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write . --ignore-path .prettierignore"
  },
  "dependencies": {
    "@types/node": "18.15.0",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "class-variance-authority": "^0.7.0",
    "daisyui": "^2.51.3",
    "eslint": "8.36.0",
    "eslint-config-next": "^13.5.4",
    "next": "^13.2.4",
    "next-themes": "^0.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-feather": "^2.0.10",
    "react-responsive": "^9.0.2",
    "react-slick": "^0.29.0",
    "slick-carousel": "^1.8.1",
    "tailwind-merge": "^1.14.0",
    "typescript": "4.9.5"
  },
  "devDependencies": {
    "@types/react-slick": "^0.23.10",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.21",
    "prettier": "^2.8.4",
    "tailwindcss": "^3.2.7"
  }
}

如有任何帮助，我们将不胜感激。

谢谢， 亚当

Answer 1

错误消息表明图像路径当前链接到

 /_next/image?url=%2Fimages%2Ficon%2FMessage.png&w=48&q=75

位置，由

Next.js

在构建过程中生成。

要解决此问题，您需要修改图像路径以正确引用存储在 _next 文件夹中的图像。您可以通过用 next/image 组件替换传统的 img 标签来实现此目的。这是一个澄清的例子：-

import Image from 'next/image';

<Image
  src="/images/icon/Message.png"
  alt="message"
  width={20}
  height={20}
  loading="lazy"
/>

我已通过@xizon 引用了此Github 存储库。并且包含图像的存储库已成功加载到 Azure 静态 Web 应用程序中。请参考此示例存储库并在您的项目中实现相同的逻辑。

我在本地克隆了这个存储库并使用下面的命令构建它，这生成了一个构建文件夹

out

，然后我在Github和Devops中的Azure静态Web应用程序部署yaml文件中使用了这个

out

文件夹通过设置

skip_build:true

:-

静态构建：-

npm install
npm run dev
npm run build
npm run export
npm run export:fix
npm run export:test

Github 管道：-

app_location: "out" 
api_location: "" 
output_location: "" 
skip_app_build: true

完整管道：-

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          lfs: false
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_KIND_DESERT_053CF2E03 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} 
          action: "upload"
          app_location: "out" 
          api_location: "" 
          output_location: "" 
          skip_app_build: true
          

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_KIND_DESERT_053CF2E03 }}
          action: "close"

输出：-

Azure DevOps 管道：-

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: AzureStaticWebApp@0
  inputs:
    workingDirectory: '$(System.DefaultWorkingDirectory)/out'
    skip_app_build: true
    azure_static_web_apps_api_token: 'xxxxxxxx42498'

输出：-