从外部来源绑定图像答案

【问题标题】：Bind image from external source从外部来源绑定图像
【发布时间】：2019-07-26 08:40:37
【问题描述】：

我正在尝试通过 Vue.js 从外部数据源绑定背景图像。代码是这样的：

<div class="image-box border"
            :style="{ background: `url(`+ item.image +`) no-repeat center` }" 
            style="width: 220px; height: 220px">

我也试过这个：

<div class="image-box border" 
            :style="{ 'backgroundImage': 'url(' + item.image + ')' }">

这就是应用程序中 url 的内容，没有错误：

background-image: url("http://localhost:8080/assets/images/shoe-1.png");

感谢任何帮助！

完整代码：

组件-

<template>
    <div class="product-card-box border">
        <div class="image-box border"
                :style="{ background: `url(`+ item.image +`) no-repeat center` }" 
                style="width: 220px; height: 220px">
             <!-- :style="{ 'backgroundImage': 'url(' + item.image + ')' }"> -->

        </div>
        <div class="info-box border">
            <div class="color-info product-info bold">{{item.colors.length}} color</div>
            <div class="product-name">
                <div class="product-info bold">{{item.name}}</div>
                <div class="product-info sub-info">{{item.gender}}'s Shoe</div>
            </div>
            <div class="product-price">
                <div class="product-info sub-info">${{item.price}}</div>
            </div>

        </div>
    </div>
</template>

数据-

const data = [
{
    name: 'SNKR 001',
    gender: 'Men',
    price: 100,
    sport: 'running',
    width: 'Wide',
    colors: ['black', 'white', 'green', 'pink'],
    sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
    image: '../assets/images/shoe-1.png'
},
{
    name: 'SNKR 002',
    gender: 'Men',
    price: 100,
    sport: 'running',
    width: 'Wide',
    colors: ['black', 'white', 'green', 'pink'],
    sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
    image: '../assets/images/shoe-1.png'
}
];
export default data;

【问题讨论】：

在data[] 中，使用require(path) 像这样image: require('../assets/images/shoe-1.png')。
@tony19 谢谢，成功了！你能把它变成一个答案，这样我就可以选择它了吗？

标签： javascript css vue.js data-binding

【解决方案1】：

在data[] 中，使用require(path) 以便在您的模板中正确解析路径：

image: require('../assets/images/shoe-1.png')

【讨论】：

【解决方案2】：

考虑只有一个style 对象。另外，它必须是背景图像吗？我相信你可以用img 和一个类来完成同样的事情，然后把它变成object-fit。

<div id="app">
  <div :style="{ 
    width: '200px',
    height: '200px',
    'background-image': `url(${backgroundImage}`,
   }"/>
</div>

new Vue({
  el: "#app",
  data: {
    backgroundImage: 'http://picsum.photos/g/1200/400?image=30',
  },
})

检查这个小提琴object-fit解决方案https://jsfiddle.net/caseyjoneal/b5r8fvjq/73/

【讨论】：

我非常喜欢这些想法 - 我将在我的下一个项目中实现它们。