HTML img не отображается картинка по абсолютному пути

Question

Есть у меня программа, с помощью которой пользователь выбирает себе аватар.
Пока он не выбрал аватар - отображается стандартная - та, которую выбрала я

properties:

image.url=https://media.kasperskydaily.com/wp-content/uploads/sites/90/2017/05/06040328/incognito-mode-featured.jpg

controller:

@Value("${image.url}")
private String imageUrl;

@GetMapping("/home")
public String home(Model model, Principal principal) {

    User currentUser = userService.findByUsername(principal.getName());
    List<Secret> userSecrets = userService.getUsersSecrets(principal.getName());

    Image image = imageRepository.findByUserUsername(principal.getName());
    imageUrl = image == null ? imageUrl : image.getName();
    log.info("Image name: {}", image.getName());

    model.addAttribute("image", imageUrl);
    model.addAttribute("user", currentUser);
    model.addAttribute("secretsSize", userSecrets.size());

    return "home";
}

Должна сразу сказать - сохраняется картинка хорошо (на жестком диске, а в бд только метаданные). В логах вывелось название картинки, в проводнике я скопипастила и вставила в поиск - картинка открылась.
Выглядит это примерно так: E:\uploaded\image.png.
Но по ссылке из интернета картинка открывается хорошо, а с комплюктера не хочет

HTML:

<img th:src="${image}" style="width: 30%" class="card-img-top" alt="Your avatar">
//из кода выше на страницу передается переменная с расположением картинки и вставляется как ресурс

Немного поэкспериментировав без шаблонизаторов, с чистым html - трабл точно такой же: из инета - пожалуйста, а с комплюктера никак. Как можно решить эту проблему?

(Запускаю на localhost с другого диска, на C:\Users...)

Answer 1

локально статичесая страничка работает

<html>
<body>
  <h1>Test</h1>
  <img src="https://media.kasperskydaily.com/wp-content/uploads/sites/90/2017/05/06040328/incognito-mode-featured.jpg">
</body>
</html>

но судя по всему Ваш "чистый html" выглядит немного иначе. Если да, прикрепите и его тоже к вопросу.

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

Далее, есть несколько потенциальных ошибок:

1: не хватает тэга '@', см https://www.thymeleaf.org/doc/articles/standardurlsyntax.html

 <img th:src="@{${image}}" style="width: 30%" class="card-img-top" alt="Your avatar">

2: перезаписывание переменной класса imageUrl, если контроллер синглтон (по умолчанию)

исправляется использованием локальной переменной:

// ...

Image image = imageRepository.findByUserUsername(principal.getName());
String userImageUrl = image == null ? imageUrl : image.getName();
log.info("Image name: {}", image.getName());

model.addAttribute("image", userImageUrl);

// ...

БЛОГ НА HUSL

HTML img не отображается картинка по абсолютному пути

Ответы (1 шт):