在客户端的 nuxt 中动态设置正文背景图像

Posted 2023-02-23

【中文标题】在客户端的 nuxt 中动态设置正文背景图像

【英文标题】：Setting body background image dynamically in nuxt on client side

【发布时间】：2021-07-14 09:05:52

【问题描述】：

我有以下 Vue/Nuxt 页面，该页面应该有一个背景图像，具体取决于查询路径。

<template>
  <div>
    You searched from  game  with word  search .
  </div>
</template>
<script>
export default 
  head () 
    return 
      bodyAttrs: 
        style: 'background-image: url(\'' + this.backgroundUrl + '\');'
      
    
  ,
  computed: 
    backgroundUrl () 
      return 'http://external-cdn/' + this.$route.query.game + '/background.jpg'
    ,
    search () 
      return this.$route.query.search
    
  

</script>

如果 s-s-r 为 false，并且页面呈现在客户端，则此想法有效。它计算头部 bodyAttrs 并计算正确的背景图像。如果我首先在服务器端生成页面，然后使用查询参数加载页面（例如 http://site/search.html?game=doom&search=gun），则图像 URL 错误：http://external-cdn//background.jpg。

我认为原因是在生成期间查询路径为空，而 head->bodyAttr 被水合为空路径。渲染页面时，它不再更新头部。

如何强制它再次更新客户端的头部或者处理动态身体背景图像的 vue/nuxt 方式是什么？

一种方法是在 mounted 生命周期钩子（在客户端运行）中使用 vanilla JS，如下所示：

  mounted () 
    const body = document.getElementsByTagName('body')[0]
    body.style.backgroundImage = 'url(' + this.backgroundUrl + ')'
  ,

但是会有更多的 vuey/nuxty 方法来实现这一点吗？

【问题讨论】：

当用户在页面内时背景会改变吗？例如，页面加载了http://site/some/bg.jpg，然后用户点击了一个按钮，背景就会发生变化。

我认为你应该添加 require()

@ImanShafiei 它不必在单击按钮时进行更改。只需加载页面，this.$route.query.game 应该包含从正确位置加载背景图像所需的游戏名称。 Sibelle，你的意思是需要图像？该图像位于另一个 CDN 服务中，因此不需要。

【参考方案1】：

在调查了你的代码之后，终于找到了问题所在。您应该使用return 作为您的head()：

head() 
    return 
        bodyAttrs: 
            style: 'background-image: url(\'' + this.backgroundUrl + '\');'
        
    
,


data() 
    backgroundUrl: 'https://picsum.photos/' + this.$route.query.link + '/',

如果您想尝试上述代码，请使用<YOUR-WEBSITE-URL>/?link=200/300 之类的链接或任何您想要的大小。

【讨论】：

我忘记了代码清单中的返回语句！我很抱歉。我修复了问题以包括那里的回报。您的发现是正确的，但是在使用nuxt build 生成页面之后，仍然没有在客户端计算头部。我正在尝试在一些代码沙箱中复制它。

在沙盒环境中复制这一点并不难，因为页面应该是静态服务的。因此，首先生成一个 HTML 页面，然后通过静态 HTTP 服务器使用查询参数调用该 HTML 页面。

它在 nuxt 服务器处理调用时工作，因为它可以正确读取 query.link。但是我没有运行任何服务器。只是静态服务器 HTML 页面。

好的，我知道了。我认为问题是因为bodyAttrs。你试过v-bind:style吗？ v-bind:style=" backgroundImage: url($$route.query.link)" 。我认为您应该在layout 的网站主包装上设置此样式。

感谢您的建议。在布局中设置它是一条路径，是的。但是它不会在body 标签中。而这个问题的需要是将它放入body-tag中，在nuxt中无法访问。