Vite 和 React 中，行内样式 backgroundImage 如何使用 @ 符号？

发布日期： 2024-11-07 阅读量： 作者： 网络

vite 和 react 中，行内样式 backgroundimage 如何使用 @ 符号？

vite 搭配 react 行内样式 backgroundimage 中使用 @ 符号

在 vite 和 react 中，行内样式中使用 backgroundimage 时，url() 中的路径通常会使用相对于当前模块的位置。为了将相对路径替换为使用 @ 符号的别名，需要使用一个额外的语句。

解决方法

在行内样式中，使用 require() 或 import() 将图片模块导入，然后将导入后的图片作为 backgroundimage 的值传递。

使用 require()：

<div style={{ backgroundimage: `url(${require('@/assets/1.jpg')})` }}>asdsa</div>

随便看看