Изображения не загружаются после развертывания — React — Azure Static Web Apps

Question

Я создаю веб-сайт реагирования + машинописного текста и развернул приложение с помощью статических веб-приложений Azure.

На локальном хосте все работает как положено, но в опубликованной среде изображение приложения не отображается. Глядя на консоль, я получаю эту ошибку:

ошибка консоли

Никакие png, svg, gif... не загружаются, но на локальном хосте работают.

Я пробовал следовать инструкциям по адресу:

https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#fallback-routes

Но безуспешно.

Это мое первое развертывание приложения в Azure. Я не знаю, важно ли добавлять дополнительную информацию.

Вся помощь приветствуется.

Мой пакет.json:

      {
  "name": "yarn",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "@anatoliygatt/dark-mode-toggle": "^1.0.0",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/draft-js": "^0.11.10",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.3",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.8",
    "@types/victory": "^35.0.0",
    "axios": "^1.3.0",
    "crypto-js": "^4.1.1",
    "draft-js": "^0.11.7",
    "draft-js-export-html": "^1.4.1",
    "env-cmd": "^10.1.0",
    "keycloak-js": "^20.0.2",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "react": "^18.2.0",
    "react-aws-s3": "^1.5.0",
    "react-aws-s3-typescript": "^1.1.5",
    "react-beautiful-dnd": "^13.1.1",
    "react-dom": "^18.2.0",
    "react-draft-wysiwyg": "^1.15.0",
    "react-hot-toast": "^2.4.0",
    "react-icons": "^4.6.0",
    "react-loading": "^2.0.3",
    "react-router-dom": "^6.4.3",
    "react-scripts": "5.0.1",
    "react-select": "^5.6.1",
    "react-toggle": "^4.1.3",
    "styled-components": "^5.3.6",
    "typescript": "^4.8.4",
    "victory": "^36.6.8",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "build:dev": "env-cmd -f .env.development yarn run build",
    "build:homolog": "env-cmd -f .env.homolog yarn run build",
    "build:prd": "env-cmd -f .env.production  yarn run build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "main": "index.js",
  "author": "João Victor Simonassi",
  "license": "MIT",
  "devDependencies": {
    "@types/react-beautiful-dnd": "^13.1.2",
    "@types/react-toggle": "^4.0.3",
    "@types/styled-components": "^5.1.26",
    "@typescript-eslint/eslint-plugin": "^5.42.1",
    "@typescript-eslint/parser": "^5.42.1",
    "eslint": "^8.27.0",
    "eslint-plugin-react": "^7.31.10",
    "file-loader": "^6.2.0"
  },
  "resolutions": {
    "styled-components": "^5"
  }
}

Мои задачи Azure-конвейера:

лазурные задачи

Answer 1

В статических веб-приложениях вы определите конфигурацию статических веб-приложений Azure в файле, который управляет mimeTypes. Попробуйте добавить недостающие типы файлов, а затем проверьте.

Ознакомьтесь с примером файла конфигурации здесь: Пример файла конфигурации.

        "mimeTypes": {
 ".json": "text/json"
 }
}

Рекомендуемое расположение файла staticwebapp.config.json — папка, указанная в качествеapp_locationв файле рабочего процесса. Однако файл можно поместить в любую подпапку внутри папки, заданной как app_location.

Насколько я понимаю, вы уже проверили настройку маршрута . Просто подтверждаю, добавили ли вы резервные маршруты вstaticwebapp.config.jsonфайл через «navigationFallback».

См.: https://learn.microsoft.com/azure/static-web-apps/configuration#fallback-routes .

      {
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
 }
}

Кроме того, просмотрите все фильтры по расширениям файлов на маршруте, как описано в этом документе .