我想将相对图像 url 粘贴到 div 以将其设置为背景图像。不幸的是 div 不会渲染图像。所以这工作正常并渲染图像
<img src="../assets/images/HeroImg.jpg">
但这个没有
<div style="background-image: url(../assets/images/HeroImg.jpg)">
Content goes here
</div>
我也尝试过的事情：
- 将 url 括在单引号内
-
assets/images/HeroImg.jpg maybe?
-
./assets/images/HeroImg.jpg从src文件夹开始
-
images/HeroImg.jpg and ./images/HeroImg.jpg从资产文件夹开始
用于背景图像的正确网址是什么？
Update
我正在使用 VueJs，所以这里的情况可能会有所不同？重现步骤：
- 使用 Vue CLI 创建新项目
- 创建一个
images目录在src/assets
- 在中创建图像
src/assets/images并称之为HeroImg
- 更新 App.vue 文件
.
<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。
特里的回答成功了，但我需要在周围添加一组额外的括号url标签内容：
computed: {
heroImage() {
return {
backgroundImage: `url(${require('../assets/images/HeroImg.jpg')})`
};
}
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
