Ошибка при использовании обещания получить изображения из AWS в Vue3.js (replit) при развертывании. ⇐ Javascript

[Anonymous]

Я пытаюсь получить изображения из AWS для отображения на странице результатов после того, как пользователь выполняет поиск на платформе.
Я использую Vue3.js и пишу код для replit. Интересно то, что это, похоже, работает в режиме разработки, но не при развертывании.
Я получаю ошибку: «TypeError: At.STS не определен»
Как решить эту проблему?
Вот HTML-код страницы результатов








Вот скрипт для страницы результатов
import { func } from '@/GetImageFunc.js';
import axios from 'axios'; // Ensure axios is imported

export default {
data() {
return {
result_list: [],
current_page_nr: 0,
total_page_nr: 0,
w: 0,
category_id: 0,
page_nr:0,
lan_id: 0,
city_filter_activated: false,
lan_filter_start: false,
};
},
methods: {
async get_result_companies(category_id, lan_id, page_nr) {
try {
const response = await axios({
method: 'get',
url: API_URL +
'/get_result_companies' +
'?category_id=' + category_id +
'&lan_id=' + lan_id +
'&page_nr=' + page_nr +
'&city=' + this.city_name,
});

// Update result_list
if (this.lan_filter_activated || this.city_filter_activated) {
this.result_list = response.data["result_list"].map((item) => ({
...item,
imageUrl: null, // Initialize image URL as null
}));
} else {
this.result_list.push(
...response.data["result_list"].map((item) => ({
...item,
imageUrl: null, // Initialize image URL as null
}))
);
}

// Fetch images asynchronously
this.result_list.forEach(async (item) => {
if (item.image) {
item.imageUrl = await this.get_image(item.id, item.image);
}
});

this.current_page_nr = response.data["current_page_nr"];
this.total_page_nr = response.data["total_page_nr"];
this.city_filter_activated = false;
this.lan_filter_activated = false;
} catch (error) {
console.error("Error fetching companies:", error);
}
},
async get_image(id, image) {
try {
const data = `enjordrepair_user${id}/${image}`;
return await func.get_image(data);
} catch (error) {
console.error("Error fetching image:", error);
return null; // Return null if there's an error
}
},
addmore() {
if (this.current_page_nr < this.total_page_nr) {
const page_nr = Number(this.current_page_nr) + 1;
this.get_result_companies(this.category_id, this.lan_id, page_nr);
}
},
},
watch: {
"$route.params.id"() {
this.get_result_companies(this.category_id, this.lan_id, this.current_page_nr);
},
},
mounted() {
this.w = window.screen.width;
if (this.lan_filter_start) {
this.get_result_companies(this.category_id, this.lan_id, 1);
}
window.onscroll = () => {
const bottomOfWindow =
document.documentElement.scrollTop + window.innerHeight ===
document.documentElement.offsetHeight;
if (bottomOfWindow) {
this.addmore();
}
};
},
};

Вот код моего GetImageFunc.js
import { S3 } from 'aws-sdk';
import Getawsapi from "@/services/getawsapi.service";

export const func = {
get_image: async (data) => {
const myBucket = 'mybucket';
const myKey = data;
const signedUrlExpireSeconds = 3600 * 1;

try {
// Fetch the AWS credentials
const awsData = await Getawsapi.getAWS2();

const accessKeyId = awsData.AWS_ACCESS_KEY;
const secretAccessKey = awsData.AWS_SECRET_KEY;

// Initialize the S3 client
const s3 = new S3({
signatureVersion: 'v4',
accessKeyId:accessKeyId, // Resolved value from the promise
secretAccessKey:secretAccessKey, // Resolved value from the promise
region: 'eu-north-1',
});

// Generate the signed URL
const url = s3.getSignedUrl('getObject', {
Bucket: myBucket,
Key: myKey,
Expires: signedUrlExpireSeconds,
});
return url;

} catch (error) {
console.error("Error generating signed URL:", error);
throw error; // Propagate the error to the caller
}
}
};

Вот скрипт для getawsapi.service.js
import axios from 'axios';
import {API_URL} from '../../config.js'

export default {
async getAWS2() {
try {
const response = await axios({
method: 'get',
url: API_URL + '/getAWSAccessKey'
});
return response.data;
} catch (error) {
console.error("Error fetching AWS credentials:", error);
throw error;
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... when-deplo