Vue js как управлять значением атрибута src если при загрузке страницы оно должно устанавливатсья php скриптом?

Question

[Андрей Ламзин]

<img src="<?=$imageUrl?>" >
и я хочу из vue js приложения изменять значение атрибута src
v-attr не работает, v-bind не получается применить.

Забыл сразу написать, изображение при этом должно нормально отображатьcя при отключенном javascript.
(Поддерживаем старый android 2 браузер, в нём vuejs не работает).

Есть нормальное решение?

Похоже что нет.
Вышел из положения таким образом:
<img ref="imagepreview" src="<?=$imageUrl?>" >

onUploadImage(sImageUrl) {
  this.$refs.imagepreview.setAttribute('src', sImageUrl);
}

Что не мне очень нравится, но другого пути похоже нет.

Answer 1

[Александр Логинов-Солоницын]

Как вариант можно завести input в котором собрать все данные, которые отдаются через PHP.

<input type="hidden" id="input-data-to-vue" value='<?= json_encode($data_from_php) ?>'>

И уже в Vue использовать эти данные

...
data() {
  return {
    dataFromPhp: null
  }
}
...
created() {
  this.dataFromPhp = JSON.parse(document.getElementById('input-data-to-vue'));
}
...

Answer 2

[Alex]

<img :src="src" :alt="alt">

{
  data: {
    src: <?=$imageUrl?>,
    alt: <?=$imageAlt?>,
  }
}

Comments

[Андрей Ламзин]

Это получается либо инлайновый javascript в html коде страницы, либо javascript файл пропускаемый через php препроцессор.
Современные проекты используют webpack для минимизации js, такое решение недопустимо.