小编Fra*_*tin的帖子

我想显示我的资产文件夹中的背景图像。当我使用图像标签时，图像会正确显示，因此图像放置得很好，但当我使用该background-image样式时会抛出 404。知道发生了什么吗？我将 Vue 3 与 TypeScript 和 Vite 2 结合使用。

这不会解析 URL：

<div style="background-image: url(./assets/img/header.png)"
></div>

但这确实：

<img src="./assets/img/header.png" alt="Header" />

我正在使用 Vue 对接 Vite 应用程序。当我yarn dev从系统运行时，一切正常，但是当我从 dockerfile 启动相同的命令时，出现以下错误

yarn run v1.22.5

warning package.json: No license field

$ vite

failed to load config from /app/vite.config.ts

error when starting dev server:

Error: spawn Unknown system error -8

我的dockerfile是

FROM node:14.16.0-alpine3.13

WORKDIR /app

COPY . .

CMD ["yarn", "dev"]

我的 docker-compose.yml 是

version: '3.8'

services:
  client:
    build: 
      context: ./dockerfiles
      dockerfile: client.dockerfile
    volumes:
      - ./client:/app
    ports:
      - '3000:3000'

我的文件夹结构是

client
|-public
|-src
|-node_modules
|-package.json
|-vite.config.ts
|- ... rest of files
dockerfiles
|-client.dockerfile …

我正在使用 TypeScript 使用 Material UI，并希望向我的主题添加自定义颜色。一切工作正常，除了 VSCode linter 向我显示下一条消息。

Type '{ tan: string; lightRed: string; red: string; offBlack: string; white: string; }' is not assignable to type 'Partial<CommonColors>'.
  Object literal may only specify known properties, and 'tan' does not exist in type 'Partial<CommonColors>'.

在开发和构建方面工作正常，唯一的抱怨是错误消息。我添加了一个自定义类型来尝试解决，但它不起作用。

Type '{ tan: string; lightRed: string; red: string; offBlack: string; white: string; }' is not assignable to type 'Partial<CommonColors>'.
  Object literal may only specify known properties, and 'tan' does not exist in type 'Partial<CommonColors>'.

const theme = …

我正在创建一个组件来拍照并上传到服务器。当我在输入框中输入内容时，setTitle 被触发并且组件被重新渲染。发生这种情况时，视频变黑了。如何避免视频被渲染？

function Camera() {
  console.log("Render camera");
  const [title, setTitle] = useState("");
  let videoRef = useRef(null);
  let canvasRef = useRef();

// This is a custom hook for get the camera input
  const mediaStream = useUserMedia({
    audio: false,
    video: { width: 300, height: 300 }
  });

  if (mediaStream && videoRef.current && !videoRef.current.srcObject) {
    videoRef.current.srcObject = mediaStream;
  }

  // Stop the video stream when component is unmount
  useEffect(() => {
    return () => {
      if (mediaStream) {
        mediaStream.getTracks()[0].stop();
      }
    };
  }, [mediaStream]); …