css - vite搭配react,行内样式backgroundImage的url如何用@符号?

Question

react中,行内样式backgroundImage里的url想用@符号,该怎么写?

<div style={{ backgroundImage: "url('@/assets/1.jpg')" }}>asdsa</div>

我在vite.config.js中配置了alias

  resolve: {    alias: {      "@": path.resolve(__dirname, "./src")    }  },

如果在css文件中,一切正常

.aa{background-image:url('@/assets/1.jpg');width:100px;height:100px;}

但是现在有个需求,需要在行内样式里写backgroundImage,但里面的url用@符号的话,并不会被解析,而是原封不动的变成字符串@
所以该怎么写,才能让@符号被解析为路径呢?

Answer 1

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

如果vite不支持require那就只能import导入图片代替require那部分

Answer 2

如果你在 Vite 配置中已经设置了别名 "@"，那么在 React 组件的行内样式中，你应该可以使用这个别名来引用你的图片。你给出的代码示例中，url() 函数中的 "@" 符号不会被解析为路径，而会原封不动地被输出。这是因为 JavaScript 无法解析 "@" 符号，因此它被当作字符串处理。

为了解决这个问题，你可以使用 JavaScript 的字符串模板语法（template literals）来包围你的 URL，这样 "@" 符号就会被解析为路径。具体做法如下：

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

在这里，url(@${require('@/assets/1.jpg')}) 是一个字符串模板，@ 符号被解析为路径，require() 函数用于加载图片文件。注意，由于 require() 函数需要一个模块路径，所以你需要确保你的图片文件在正确的路径下。

然而，这种方法有一个缺点：每次组件加载时，都需要重新加载图片。如果你希望图片在组件加载时只加载一次，你可以考虑将图片的 URL 存储在一个状态变量中，然后在样式中使用这个变量。例如：

import { useState } from 'react';import image from '@/assets/1.jpg'; // 假设你的图片文件在这里function MyComponent() {  const [imageUrl, setImageUrl] = useState(null);  useEffect(() => {    setImageUrl(require('@/assets/1.jpg').default);  }, []); // 在组件加载时设置图片 URL  return (    <div style={{ backgroundImage: `url(${imageUrl})` }}>asdsa</div>  );}

在这个例子中，我们使用 useState 和 useEffect 钩子来在组件加载时设置图片 URL。useEffect 钩子的依赖数组是空的，这意味着这个钩子只会在组件加载时运行一次。