如何在nuxt generate中插入背景图片

Question

如果很明显，我很抱歉

我正在使用这样的 nuxt generate 创建几千个页面

<template>
    <div>
        <div class="main-picture">
           <span>{{landing.name}}<span>
        </div>
    </div>
<template>

<script>
import { landingshs } from '~/db/landingshs'
export default {
    data() {
        return {
            link: "https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_November_2010-1a.jpg"
        }
    },
    asyncData({ params }) {
    const landing = landingshs.find(l => l.id === params.id)
    
    return {landing}

 },

</script>

现在我正在尝试设置这样的图片

<style>
.main-picture {
    width: 1000px;
    height: 1000px;
    background-image: v-bind("`url(${link})`");
}
</style>

我也试过这样做，但没有成功。 使用这种方法，网络中甚至没有请求

 mounted() {
  setTimeout(() =>{
    document.querySelector('.main-picture').style.backgroundImage = "url(" + this.link + ")";
      }, 5000);
     
    },

创建常规页面（不是_id.vue）时一切正常

nuxt 生成本身运行良好，插入必要的数据

[email protected] [email protected]

Answer 1

你试着用那种方式

 background-image: url({{link}});

如果它不起作用，请在模板上尝试这个

:style="{ backgroundImage: `url(${link})` }"