【问题标题】:TailwindCSS + Nuxt background imageTailwindCSS + Nuxt 背景图片
【发布时间】:2020-11-13 12:55:16
【问题描述】:

我在 Nuxt 项目中使用 TailwindCSS,并尝试将背景图像添加到标题元素。 tailwindCSS 官方文档解决方案如下:<div class="bg-fixed ..." style="background-image: url(...)"></div>

我的 bitcoin.jpg 图像所在的 webpack assets 文件夹中有一个 images 文件夹。

我尝试过使用<header class="bg-fixed" style="background-image: url(~assets/images/bitcoin.jpg)" 这不起作用,我也尝试过类绑定,这也不起作用。有人对修复有任何想法吗?

提前致谢!

【问题讨论】:

    标签: javascript vue.js nuxt.js tailwind-css


    【解决方案1】:

    标题没有任何内容,也没有高度或宽度,因此不显示。而且你看不到背景。 一个可行的解决方案是:

    <div class="bg-fixed w-full" style="background-image: url('/images/bitcoin.jpg'); min-height: 200px;" />
    

    我添加了 100% 的宽度和 200 像素的最小高度。 而且,您似乎错过了图像路径周围的单引号。

    bg-fixed 不是最好的解决方案,您应该尝试 bg-coverbg-contain bg-no-repeat

    https://tailwindcss.com/docs/background-size#class-reference

    【讨论】:

      【解决方案2】:

      试试这个(编辑:这不起作用,向下滚动):

      <header class="bg-fixed" style="background-image: url(~@/assets/images/bitcoin.jpg)"
      

      ~ 告诉 webpack 将 url 视为模块请求,然后您需要使用正确的别名。在nuxt中,这些通常以@为前缀。

      编辑

      我没有意识到 Webpack 的底层发生了一些奇怪的事情。该语法适用于 src 属性,但 Webpack 不会为 background-image 进行路径解析。

      这是真正的解决方法:

      <header class="bg-fixed" :style="{'background-image': `url(${require('@/assets/images/bitcoin.jpg')})`}"
      

      通过使用 require,您向 Webpack 发出信号以使用 file-loader 创建正确的模块路径,并在 url 函数中替换它。

      工作示例:https://codesandbox.io/s/late-mountain-zdw09?file=/pages/index.vue

      引用供参考:

      为了让 Webpack 返回正确的资源路径,你需要使用 require('./relative/path/to/file.jpg'),它会被 file-loader 处理并返回解析后的 URL

      引用来自的页面:https://vuejs-templates.github.io/webpack/static.html

      参考:https://github.com/vuejs/vue-loader/issues/646

      【讨论】:

      • 感谢您的回答。我也试过了,不幸的是这也不起作用,我仍然得到 'GET localhost:3000/~@/assets/images/bitcoin.jpg 404 (Not Found)
      • @Christian.P 我添加了一个更新和一个解决问题的工作示例,看起来是对 Vue 的 Webpack 配置如何在后台定义的限制。
      猜你喜欢
      • 2021-06-22
      • 2021-02-20
      • 2021-11-26
      • 1970-01-01
      • 1970-01-01
      • 2019-05-15
      • 2013-08-16
      • 1970-01-01
      • 2019-03-24
      相关资源
      最近更新 更多