首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >在没有webpack的情况下从css文件中加载图像

在没有webpack的情况下从css文件中加载图像
EN

Stack Overflow用户
提问于 2022-09-14 16:21:29
回答 1查看 59关注 0票数 0

我安装了npx create-react-app my-app --template typescript

然后加载CSS文件,然后出现如下错误:

用问题编译的

:x

./src/css/common.css (./node_modules/css-loader/dist/cjs.js??ruleSet1.rules.oneOf5.use1!./node_modules/postcss-loader/dist/cjs.js??ruleSet1.rules.oneOf5.use2!./src/css/common.css) 5:36-105中的错误

未找到模块:错误:无法解析‘../public/资产/映像/ico_check1_off.png’中的‘/卷/JsWeb/ejmComp/wooriga/web/src/css’

./src/css/common.css (./node_modules/css-loader/dist/cjs.js??ruleSet1.rules.oneOf5.use1!./node_modules/postcss-loader/dist/cjs.js??ruleSet1.rules.oneOf5.use2!./src/css/common.css) 6中的错误:36-104

未找到的模块:错误:无法解析‘../public/资产/映像/ico_check1_on.png’中的/卷/JsWeb/ejmComp/wooriga/web/src/css‘

我添加了文件images.d.ts

代码语言:javascript
运行
复制
/// <reference types="react-scripts" />

declare module '*.png';
declare module "*.jpg";
declare module '*.png' {
    const src: string;
    export default src;
}
declare module "*.jpeg";
declare module "*.gif";

tsconfig.json添加:

代码语言:javascript
运行
复制
     "compilerOptions": {
        "target": "es5",
        "typeRoots" : ["node_modules/@types", "src/types"],
        "lib": [
          "dom",
          "dom.iterable",
          "esnext"
        ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src",
    "src/types/images.d.ts",
    "**/*.ts", "**/*.tsx"
  ]
}

在没有webpack的情况下,如何从CSS文件中加载图像?

在CSS文件中出现的错误:

代码语言:javascript
运行
复制
.custom { display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; margin-right: 20px; background: url('../asset/images/ico_check1_off.png') center center no-repeat; background-size: contain; }

background: url('../asset/images/ico_check1_off.png')

发生错误

但是main.tsx直接调用没有错误:

<Image src="../asset/images/ico_check1_off.png"/>

仅发生来自CSS文件的错误调用映像。

代码语言:javascript
运行
复制
folder

public
 - asset/images

src
 - component / main
   - main.tsx
 - component / css 
   - common.css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-20 15:14:05

使用title.module.css可能会加载

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73720210

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档