来自字符串的动态背景图像路径-gridsome / vue js

问题描述

TL / DR-将图像字符串作为背景图像路径传递会导致找不到模块错误：

我正在将带有数据的obj传递到vue js组件中，其中一个值是要设置为背景图片的img路径-

将数据obj传递到组件：<PageSection :data="clients" />

（请参考：clients.clientData[1].backgroundMob）

 clients: {
        sectionTitle: 'Clients',sectionSubTitle: '"Some of the amazing humans I have had the pleasure of working with"',backgroundColor: '#F08080',titleColor: '#E65454',clientData: [
          {title: 'Trippy',subTitle: 'West Auckland Adventures',siteLink: 'X',gitHub: 'X',docs: 'X',backgroundMob: '@/static/img/trippy.png'},{title: 'Mr Nobodies',subTitle: 'Slice Cream',docs: 'X'},docs: 'X'}
        ]
      }

在我的组件中，我运行一个v-for="client in data.clients"，它遍历数据，我想为background-image URL（）添加字符串，以便它们可以动态加载：这是指：style =“ {backgroundImage} “元素属性

HTML代码-VUE中

<div class="client-data scrollChild" 
            v-for="client in data.clientData" 
            :key="client.title"
            :style="{ backgroundImage: 'url(' + require(`${client.backgroundMob}`) + ')' }"


            >

                <div class="client-info">
                    <h2>{{client.title}}</h2>
                    <h3>{{client.subTitle}}</h3>
                    <a href="" class="visitSite">
                        <img src="" alt="">
                        <p>Visit Site</p>
                    </a>
                     <a href="" class="findOutMore">
                        <img src="" alt="">
                        <p>Find Out<br>More</p>
                    </a>
                </div>

                <div class="swipe"></div>
            </div>

由此我得到一个错误-vue.runtime.esm.js？2b0e：1888错误：找不到模块'@ / static / img / trippy.png'

我一定在这里错过了一些事情

也许是因为webpack需要将图像显示在页面上？ 也许需要一个特定的模块来加载图像？

我有点迷茫，并尝试了多种变体：

如果您给它提供了URL链接，例如'HTTP://amazingCatPhotos.com/1.jppg），则可以运行背景图片-因此，我知道它与传递路线/路径而不是传递方法有关CSS属性。

这里的任何帮助都会很棒。

请注意我正在跑步：

VUE JS-使用网格框架。

一切顺利- 沃利

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）