Вычисленная поддержка или данные для передачи в привязку стиля для Backgound Image - PullRequest
Новая
       20

Вычисленная поддержка или данные для передачи в привязку стиля для Backgound Image

0 голосов
/ 22 апреля 2019

Я передаю объект, каждый объект имеет строковый путь своего фонового изображения.Я пытался работать с данными и вычисляемым свойством, но ни один из них не работает с: style закреплением;однако, он работает как переменная vue в тексте, например.

Я пытался работать с данными и вычисляемым свойством

Следующие работы. 

<div 
:style="{ backgroundImage: 'url(' + require('@/assets/images/cards/pic.jpg') + ')' }"

Этоне работает с данными 

<div :style="{ backgroundImage: 'url(' + require(imadata) + ')' }">

data() {
   return {
      imadata: "@/assets/images/cards/" + this.cardItem.image
};}

Ни с вычисленным свойством 

<div :style="{ backgroundImage: 'url(' + require(ima) + ')' }">

computed: {
   ima() {
     return "@/assets/images/cards/".concat(this.cardItem.image);
}}

Вот ошибка для вычисляемого свойства: [Vue warn]: Ошибка при рендеринге: «Ошибка:Не удается найти модуль '@ / assets / images / cards / queryfox.jpg' "

Я ожидаю передать переменную фоновому изображению в стиле привязки

1 Ответ

0 голосов
/ 23 апреля 2019

Используя тег img в приложении laravel vue, вам не нужно добавлять require () или @ / assets /.Просто используйте путь к изображению или файлу, как он указан ниже 

<img src="/image/test.jpg"/>

Это будет прекрасно работать.Для случая вашего стиля 

<div :style="{ backgroundImage: 'url(' + imadata + ')' }">
data() {
    return { 
        imadata: "/images/cards/" + this.cardItem.image 
    };
 }

Это подойдет

...