Vue backgroundImage未从本地目录中显示

Question

我正试图为我的列表项分配一个背景图像，我将从下面代码中的对象中获取数据。当我从网络上放置随机img的https时，我没有问题，但如果我链接到我的本地资产文件夹，我就不会显示img。你能告诉我问题出在哪里吗。

我的存储文件：

data() {
return {
portfolioListData: [
{
id: 'id-1',
date: '2018',
title: 'Stitching Fairy',
description: 'Web Design / Development',
link: 'https://www.stitchingfairy.com/index.html',
routLink: '/stitchinFiary',
backgroundImg: {
backgroundImage: 'url(./assets/StitchingFairyBackground.jpg)'
} 
},
{
id: 'id-1',
date: '2018',
title: 'Stitching Fairy',
description: 'Web Design / Development',
link: '~https://www.stitchingfairy.com/index.html',
routLink: '/stitchinFiary',
backgroundImg: {
backgroundImage: 'url(https://media.istockphoto.com/photos/watercolor-textured-background-picture-id887755698?k=6&m=887755698&s=612x612&w=0&h=_yEUF8gLpWjZv5IgwuWkecNVt4X4P7vpuFBKCWIuR44=)'
}
}
]
};
},
provide() {
return {
resources: this.portfolioListData
};
}

我的元素标记：strong文本

<template>
<li>
<div :style="backgroundImg" class="portfolio-element">
<base-container>
<base-half-half>
<template v-slot:leftSide>
<div class="left">
<p>{{ date }} </p>
<h3>{{ title }}</h3>
<p>{{ description }}</p>
</div>
</template>
<template v-slot:rightSide>
<div class="right">

</div>
</template>
</base-half-half>
</base-container>
</div>
</li>
</template>
<script>
export default {
props: ['date', 'title', 'description', 'backgroundImg']
};
</script>
<style lang="scss" scoped>
.portfolio-element {
background-repeat: no-repeat;
background-size: cover;
height: 20rem;
}
</style>

列表元素

<template>
<ul>
<portfolio-element
v-for="res in resources"
:key="res.id"
:date="res.date"
:title="res.title"
:description="res.description"
:backgroundImg="res.backgroundImg"
></portfolio-element>
</ul>
</template>
<script>
import PortfolioElement from './PortfolioElement.vue';
export default {
inject: ['resources'],
components: {
PortfolioElement
}
}
</script>

Answer 1

您可以将require()用于本地资产

更改此行：

backgroundImage: 'url(./assets/StitchingFairyBackground.jpg)'

到此：

backgroundImage: `url(${require('./assets/StitchingFairyBackground.jpg')})`

Answer 2

是的，我也遇到过这个问题，我所做的是创建一个url，并向本地存储图像的后端发出获取图像的请求。

在Vue模板中，

<div  :style="{ 'background-image': `url(${srcdest})` }" />

srcdest变量应该具有映像的完整url位置，如(https://localhost:(服务器端口号(/+文件映像(

你可以签出我提到的这个链接来解决这个问题此处