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

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

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

解决方法

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

使用 require()：

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

如果 vite 不支持 require()，则可以使用 import() 代替，并使用 default 属性获取图片模块：

import image from '@/assets/1.jpg';
<div style={{ backgroundImage: `url(${image.default})` }}>asdsa</div>

通过使用 require() 或 import()，图片模块将被作为绝对路径导入，并可以正确解析 @ 符号别名。

以上就是Vite 和 React 中，行内样式 backgroundImage 如何使用 @ 符号？的详细内容，更多请关注其它相关文章！