背景图像 url() 不起作用，但带有 src 的图像标签可以

Posted 2023-03-07

【中文标题】背景图像 url() 不起作用，但带有 src 的图像标签可以

【英文标题】：Background-image url() doesn't work but image tag with src does

【发布时间】：2021-02-07 00:29:59

【问题描述】：

目前在vue 3和tailwind css中工作，该路径适用于src但不适用于url，我已经用尽了我能找到的所有信息但似乎无法找出问题所在，我相信文件路径一定是正确的因为 src 能够找到它

<template>
  <div
    class="absolute top-0 w-full h-full bg-center bg-cover"
    style="background-image: url(../assets/images/unsplash.png)"
  >
    <span id="blackOverlay" class="w-full h-full absolute opacity-75 bg-black"></span>
   <div>
     <img src="../assets/images/unsplash.png" >
   </div>
  </div>
</template>

【问题讨论】：

这能回答你的问题吗？ how to set background image url for local files?

使用您的开发工具并在网络选项卡中检查加载了哪个图像。如果您从代码中删除 img，则您没有内容。然后你看不到图像，但无论如何它都会加载

【参考方案1】：

图片的网址应该是简单的引号:) 试试这个：

style="background-image: url('../assets/images/unsplash.png')"

真诚地， 亚历克斯；）

【讨论】：

也试过了，但不起作用，根据文档，引号是不必要的