THREE.JS has been unable to add texture can not find

You use a relative path to load the image: @/assets/RC.jpg, but the assets folder may not be in the same directory as your .vue file.

So the first step is to check the following points:

1. Is the image path correct? Is the assets folder placed in the same directory as .vue?

2. Use the network panel to check whether the image request is successful

3. Try loading images with absolute paths instead of relative paths

4. Try to use public online images to temporarily test whether the loading is successful

5. The best way is to use Vue's asset import method to import image resources

html

<template>
  <img src="@/assets/R-C.jpg"> 
</template>

<script setup>
import cubeImg from '@/assets/R-C.jpg'

const cubMaterial = new THREE.MeshBasicMaterial({
  map: cubeImg 
})  
</script>

Then check the reasons one by one according to the above points:

• Is the image path correct?
• Whether the network request was successful
• Temporary testing with public images
• Import with Vue regular asset import

Through this method of analysis and troubleshooting, it is generally possible to quickly locate the cause of the image loading failure, which may be mainly due to wrong path writing or network request failure. I hope that a detailed problem analysis can help you solve the problem.

Based on the code and problems you provided, I analyzed the possible causes and troubleshooting steps, and wrote this blog to share. The main contents include:

1. Check image path
2. Network panel view request
3. try using absolute path
4. Temporarily test with public images
5. Best practices for using Vue's asset import

Through the above methods and combined with the relevant context you provide, analyze and locate the cause of the image loading failure.