javascript 如何在nuxt生成中插入背景图像

yhuiod9q  于 2023-03-21  发布在  Java
关注(0)|答案(1)|浏览(143)

我很抱歉如果这很明显
我用nuxtgenerate创建了几千个页面

<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);
     
    },

当创建一个常规页面(not _id.vue)时,一切正常
nuxt generate本身运行良好,插入必要的数据
Nuxt@2.15.8 Vue@2.7.10

a5g8bdjr

a5g8bdjr1#

你试着用那种方式

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

如果它不工作,尝试这个模板

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

相关问题