- 使用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更改为存储在网络上的图像,它可以工作,但不是本地的。有什么原因吗?
2条答案
按热度按时间13z8s7eq1#
http://localhost:8080/@/assets/images/nicolas.jpg
您的生成器不会转换“@”别名。弄个化名。
ne5o7dgx2#
您可能需要调整json文件中的图像url:
src/assets/images/nicolas.jpg
我也有同样的问题
和
不起作用,但指定'src'起作用。另外,在内联html中,不调用getStyle(index),而是动态地将图像URL内联,怎么样?说,而不是
怎么样: