我想粘贴一个相对图像url到一个div设置为背景图像。不幸的是，div不会呈现图像。因此，这工作良好，并呈现图像
<img src="../assets/images/HeroImg.jpg">
但这个不是
<div style="background-image: url(../assets/images/HeroImg.jpg)">
Content goes here
</div>
我也尝试过的事情：
资产/images/heroimg.jpg可能吗？./assets/images/heroimg.jpg从src文件夹开始images/heroimg.jpg和./images/heroimg.jpg从“资源”文件夹开始背景图像的正确url是什么？
更新
我在用VueJs所以这里的情况可能会有所不同？再现的步骤：
src/assetsimages目录
src/assets/images中创建映像，并将其称为heroimg.
<template>
<div id="app">
<div>
This works:
</div>
<div>
<img src="./assets/images/HeroImg.jpg">
</div>
<div>
This doesn't work:
</div>
<div style="background-image: url('./assets/images/HeroImg.jpg')">
Content without background image
</div>
</div>
</template>
您将看到img标记呈现的是图像，而不是带有背景图像的div。
当您使用相对路径时，如果在内联style属性中发现它们，Webpack将无法正确解析它们。但是，如果直接将图像路径用作模板中的
在模板中，可以使用v-bind:style=“HeroImage”引用计算属性：
<template>
<div id="app">
<div v-bind:style="heroImage">
Content without background image
</div>
</div>
</template>
然后，在您的VueJS组件本身中，您可以：
computed: {
heroImage() {
return {
backgroundImage: `url${require('../assets/images/HeroImg.jpg')}`
};
}
}
