计算的道具或数据传递给背景图像的样式绑定

Posted 2023-02-23

【中文标题】计算的道具或数据传递给背景图像的样式绑定

【英文标题】：Computed Prop or Data to pass to style binding for Backgound Image

【发布时间】：2019-09-11 21:27:48

【问题描述】：

我正在传递一个对象，每个对象都有其背景图像的字符串路径。我尝试过使用数据和计算属性，但它们都不适用于 :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 警告]：渲染错误：“错误：找不到模块 '@/assets/images/cards/queryfox.jpg'”

我希望在样式绑定中将变量传递给背景图像 src

【问题讨论】：

你试过没有require()方法的路径吗？像这样：

是的，它可以按照您所说的添加路径；但是，我需要从道具中检索它。问题是我从父对象传递了一个对象，对象中的所有信息都可以，但是图像中的 src 不起作用

【参考方案1】：

在 laravel vue 应用中使用 img 标签，你不需要添加 require() 或 @/assets/。只需使用图像或文件的路径，如下所示

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

这会很好用。对于你的造型

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

这样就可以了