Изображения не загружаются на веб-сайт, даже если они существуют
Внешний код js не будет загружать изображения, если имя не будет напечатано полностью и в двойных кавычках. Чтобы отображать изображения динамически, я не могу объединить или «+» родительскую папку и имя изображения.
Мой СТЕК: reactJS, Axios, springboot
Я хочу вызвать серверную часть, получить список путей к файлам (строкам) и динамически отображать изображения во внешнем интерфейсе с этими путями к файлам. Достаточно просто. Однако каждый раз, когда я пытаюсь показать изображения в интерфейсе, это не работает. Во первых это работает
ЭТО РАБОТАЕТ:
<img src = {require(("../fullStackFiles/206_1dbb9a3f-4c43-4ac2-b810-aa6b04d0dcb4_house.jpeg"))} className = "img-fluid" alt = "house" />
ЭТО НЕ РАБОТАЕТ:
const parent = "../fullStackFiles/"
const name = "206_1dbb9a3f-4c43-4ac2-b810-aa6b04d0dcb4_house.jpeg"
const symbol = "\""
<img src = {require((test))} className = "img" />
const test = symbol.concat(parent).concat(name).concat(symbol).toString()
const test2 = parent+name;
const test3 = symbol+parent+name+symbol;
const test4 = test3.toString();
const test5 = ( parent.concat(name).toString() );
Или любой другой тест, который я пробовал с таким количеством перестановок, но я не могу просто заставить его работать. И если я не смогу заставить его работать с этим стилем, я не смогу использовать данные из своего API.
API FE
const loadImages = async () => {
const images = await axios.get(`http://localhost:8080/fileSystem/getImages/${id}`);
console.info("loading images called " + images.data);
setImages(images.data);
};
API-интерфейс (SpringBoot)
@GetMapping("/fileSystem/getImages/{propertyId}")
public String[] downloadMultipleImagesFromFileSystem(@PathVariable long propertyId) throws IOException {
System.out.println("FINDING IMAGES CALLED");
String[] paths = fileRepository.findImagesByPropertyId(propertyId);
return paths;
}
Пожалуйста, дайте мне знать, если у вас есть какие-либо лучшие практики, которыми вы хотели бы поделиться о Springboot и API, а также обо всем, что мне нужно изучить.
Я еще юниор и очень хочу учиться.
Привет, это массив строк, я думаю, журнал консоли «загружает изображения с именем 206_W1dbb9a3f-4c43-4ac2-b810-aa6b04d0dcb4_house.jpeg, 206_ac9b81f3-3783-4d61-9177-abbae30fbfb1_house.jpeg8,206_206_ac9b81f3-3783-4d61-9177-abbae30fbfb1_house. c7-45be-b767-6d28e50da4d6_house.jpeg,206_d524ebe8-9562-4186-bd56-9a65167cd397_house.jpeg"
@tromgy, но как ни странно, когда я пытаюсь найти его тип, он говорит, что он не определен. Это очень запутанно. после запятых нет пробелов, это нормально?
re «когда я пытаюсь найти его тип, он говорит undefined»: здесь вы имеете дело с асинхронным кодом; убедитесь, что вы пытаетесь найти его тип после загрузки, а не во время ожидания вызова API.
@DanielBeck, привет, да, с ним что-то не так, и мне удается исправить эту часть. Я возвращаю объект сейчас. Но у меня все еще есть проблема с отображением изображения, например, с динамическим использованием пути к файлу и передачей его в src = ""
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Учитывая эти определения переменных:
const parent = "../fullStackFiles/"
const name = "206_1dbb9a3f-4c43-4ac2-b810-aa6b04d0dcb4_house.jpeg"
const symbol = "\""
Проходя через ваши попытки:
const test = symbol.concat(parent).concat(name).concat(symbol).toString()
test приведет к строке, которая содержит " в качестве первого и последнего символов, что неверно (кавычки заключаются в строку, а не встраиваются внутрь нее!) Также toString() в конце является избыточным, потому что он уже строка.
const test2 = parent+name;
test2 должен привести к правильному пути к файлу, если вы определили его, прежде чем пытаться его использовать. (Ваш пример кода показывает, что вы используете его до того, как определите его, хотя я не уверен, что смешение HTML и javascript в вашем вопросе точно отражает то, что вы делаете в своем коде; это должно привести к синтаксическим ошибкам, если вы' делать это точно так, как вы показали здесь.)
const test3 = symbol+parent+name+symbol;
test3 будет иметь тот же результат, что и test. Сложение строк вместе рассматривается в javascript как конкатенация; проблема здесь в том, что вы неправильно вставили кавычки как часть самой строки.
const test4 = test3.toString();
test4 идентично test3; вызов toString для чего-то, что уже является строкой, ничего не делает.
const test5 = ( parent.concat(name).toString() );
test5 идентичен test2, но с другим избыточным toString обращением к вещам, которые уже связаны.
вижу, спасибо!!! но у меня все еще есть проблемы с пониманием, поэтому вы говорите, что test2 должен быть правильным путем к файлу. Но скажем, я храню свои файлы в папке за пределами моего реактивного или java-проекта, как мне на них ссылаться? Извините, я понятия не имею о лучших методах управления файлами или о том, есть ли протокол для хранения изображений.
Я только что прочитал, что реакция будет автоматически искать материал в своей папке PUBLIC. я этого не знал. Я думал о том, чтобы хранить свои изображения вне моей папки java и реагировать на эмуляцию S3. Должен ли я каждый раз использовать абсолютный путь или есть способ изменить, где мой ответ выглядит по умолчанию?
Я изначально храню свои изображения в папке моего бэкэнда (JAVA), чтобы быть «ближе» к моему бэкэнду, но, может быть, это глупо? Я переместил все изображения, чтобы реагировать на общую папку из-за простоты. ха-ха, извините, если я кажусь глупым, действительно младший разработчик
Вы можете размещать изображения вне вашего проекта, но для их использования вам потребуется полный URL-адрес (включая доменное имя), а не только абсолютный путь. React можно настроить по-разному, но пока, пожалуй, лучше придерживаться основ :)
…и, да, изображения обычно считаются частью внешнего кода вместе с вашими html, css и js; бэкэнд — это ваш API и база данных. (Это немного упрощенно, но достаточно близко)
Как выглядит
images.data?