Vue3 can't use require to import pictures, etc., you need to use newURL to dynamically import static resources such as pictures

1. When using vue3 to develop a project for the first time, use require ('image path'), and the browser reports an error:

Uncaught (in promise) ReferenceError: require is not defined

 Solution:

1. Because require is a loading capability provided by webpack, but the vue3 project is matched with vite, so the static resource loading method provided by vite should be used here.

Official document: https://vitejs.cn/guide/assets.html#the-public-directory

 usage:

new URL('path', import.meta.url).href

As shown in the picture:

 Change the above require to the format of new URL, and the page can load static resources normally