Vue.js импортирует изображения
Итак, я создаю приложение с панелью управления, и я хочу иметь возможность динамически изменять несколько изображений внутри приложения, и моя проблема в том, что это просто не сработает.
Это тот div, который я пытаюсь изменить
<div class = "bg-image bg-parallax overlay" :style = "`background-image:url(${bg1url})`"></div>
это часть сценария файла Home.vue
<script>
import axios from 'axios';
export default {
name: 'Home', // this is the name of the component
data () {
return{
page_data: {},
bg1url: null,
};
},
created() {
axios.get("http://localhost:5001/api/v1/pages")
.then((result) => {this.page_data = result.data.page_data});
this.bg1url = require('@/assets/img/' + this.page_data.background1);
alert(page_data.background1);
},
};
</script>
Я пробовал большинство предложений по переполнению стека, но, похоже, ничего не работает. Я использую конфигурации веб-пакетов по умолчанию и сгенерированную структуру
Примечание: части с аксиомами, извлекаемыми из бэкэнда, работают правильно. Проблема только в добавлении изображения в стиль.
Разве вам не нужно выполнять последние два оператора внутри Promise?
Я пробовал, но по-прежнему отображается как null
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я думаю, это может быть из-за того, что вы устанавливаете значение для bg1url вне обещания (функция обратного вызова axios), и поэтому это синхронизирует код, а не асинхронно
поэтому, пожалуйста, попробуйте обновить, используйте это вместо
created() {
axios.get("http://localhost:5001/api/v1/pages").then(result => {
this.page_data = result.data.page_data
this.bg1url = require('@/assets/img/' + this.page_data.background1);
});
},
он по-прежнему регистрируется как ноль
Вы пробовали без запроса, например: this.bg1url = '@/assets/img/' + this.page_data.background1
он просто не находит его. После того, как я поместил это так, в браузере в URL-адресе я вижу это, но изображение не найдено. то же самое произойдет, если я сделаю ../, что будет относительным путем к этому
Разве вы не должны установить
bg1urlдля URL-адреса, а не для самого объектаImage?