Vue.js无法加载背景图片

14ifxucb  于 2023-05-01  发布在  Vue.js
关注(0)|答案(2)|浏览(202)
  • 使用Vue CLI*

你好,我正在用vue更新一个网站。js和一切工作正常除了背景图像。
在其中一个视图中,我有这样的代码:

<div v-for="(member, i) in team" :style="{'background-image': `linear-gradient(-225deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, var(--end-opacity)) 50%),url(${require(getStyle(i))})`}" :key="i">
  <h2>{{member.name}}</h2>
  <p class="member-desc">{{text.about.members[i]}}</p>
</div>

我从一个JSON文件中获取背景图片URL(图片存储在assets文件夹中),它看起来像这样:'@/assets/images/nicolas.方法中定义的“getStyle”函数看起来像这样:

getStyle (index) {
   return this.team[index].image
}

问题是网站不显示图像并返回 GET http://localhost:8080/@/assets/images/nicolas。jpg 错误。
如果我将URL更改为存储在网络上的图像,它可以工作,但不是本地的。有什么原因吗?

13z8s7eq

13z8s7eq1#

http://localhost:8080/@/assets/images/nicolas.jpg
您的生成器不会转换“@”别名。弄个化名。

ne5o7dgx

ne5o7dgx2#

您可能需要调整json文件中的图像url:
src/assets/images/nicolas.jpg
我也有同样的问题

../assets/images/

@/assets/images/

不起作用,但指定'src'起作用。另外,在内联html中,不调用getStyle(index),而是动态地将图像URL内联,怎么样?说,而不是

url(${require(getStyle(i))})

怎么样:

url(${ 'src/assets/images/' + member.image})

相关问题