Vite + React项目中行内样式的路径解析

在Vite和React项目中，使用行内样式设置backgroundImage时，直接使用@符号引用路径可能会失效。即使你的vite.config.js中已正确配置了别名：

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

并且在CSS文件中能正常使用@符号（例如：.aa { background-image: url('@/assets/1.jpg'); }），行内样式却无法解析。

问题在于，行内样式中的字符串字面量不会被Vite的路径别名解析机制处理。解决方法是使用require()函数动态导入图片：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

import React from 'react';

const MyComponent = () => {
  const imagePath = require('@/assets/1.jpg'); // 使用require()导入图片

  return (
    <div style="{{" backgroundimage:>
      asdsa
    </div>
  );
};

export default MyComponent;

require()函数会将@/assets/1.jpg解析为正确的路径，并返回图片的URL。 然后，使用模板字面量将图片路径嵌入到backgroundImage样式中。

如果你的Vite版本不支持require()，可以使用import语句替代：

import React from 'react';
import myImage from '@/assets/1.jpg'; // 使用import导入图片

const MyComponent = () => {
  return (
    <div style="{{" backgroundimage:>
      asdsa
    </div>
  );
};

export default MyComponent;

记住，import语句会将图片导入为一个模块，因此可以直接在backgroundImage中使用。 选择哪种方法取决于你的Vite版本和项目配置。 确保你的图片路径正确，并且图片文件存在于src/assets目录下（或你配置的别名路径）。