Texture loader map getting html/text instead of jpg

Hello everyone, I am new in three, and having this issue of gettin html/text instead of jpg.

I am importing files from script:

import bg1 from "../images/prvi.jpg";
import bg2 from "../images/1.png";
import bg3 from "../images/2.jpg";
import bg4 from "../images/3.jpg";
import bg5 from "../images/4.jpg";
import bg6 from "../images/5.jpg";
import bg7 from "../images/6.png";
import bg8 from "../images/7.jpg";
import bg9 from "../images/8.jpg";
import bg10 from "../images/9.jpg";

const images = {
  bg1,
  bg2,
  bg3,
  bg4,
  bg5,
  bg6,
  bg7,
  bg8,
  bg9,
  bg10,
};

export default images;

here is the script:

import * as THREE from "three";
import images from "./images";
const container = document.querySelector(".three_bg");
const loader = new THREE.TextureLoader();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  70,
  window.innerHeight / window.innerWidth,
  0.1,
  1000
);
const renderer = new THREE.WebGL1Renderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
const back1 = loader.load(images.bg1);
const geometry = new THREE.PlaneGeometry(5, 5);
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  map: back1,
});
const mesh = new THREE.Mesh(geometry, material);
camera.position.z = 5;
scene.add(mesh);
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
container.appendChild(renderer.domElement);
animate();

Now the problem is that I don’t get image rendered. In the developer tool I get html/text. I’ve tried to link image from the folder:

const back1 = loader.load("../images/background.jpg");

but still getting html/text.

But when I link the image to the outside link lke:

const back1 = loader.load(
  "https://i0.wp.com/3dtextures.me/wp-content/uploads/2022/06/Material_2081.jpg?w=600&ssl=1"
);

everyting works fine. can anyone tell me what am I doing wrong
Thank you

Look you didnt add the camera to the scene, scene.add( camera );

Thank you very much for looking through the code, but I did add the camera, it’s in a function “renderer.render(scene, camera);”

That’s interesting, i just tested my code without scene.add(camera) and it works. Let me review again

Can you post here or make a screenshot of that html/text from the developer tools? No need for the whole thing if it’s longer, just a couple of lines to have an idea about what it looks like.

three_shot

As far as I know import statement is only for impotring Javascript modules (that contain Javascript code). You can not import images like that

import bg1 from "../images/prvi.jpg";

You also can not load images to a html page locally from a folder on your computer without running a web server because of CORS policy, that might be the reason this doesn’t work:

const back1 = loader.load("../images/background.jpg");

Well, the XHR status of 304 (“Not Modified”) doesn’t look like the “normal” success status of 200 (“OK”), so it’s possible that the problem is related to that. Clicking on the image file name might provide additional information that could help in debugging. That’s one possibility.

Another possibility, although I’m not sure if it applies here, is some sort of CORS issue.

Where exactly are you imported / loaded those images from, when using the relative ../ path? Local server / folder? Can you try using an absolute path, e.g. if the files are local, something like http://localhost:8080/PathToLocalFile/FileName.jpg (depending on what port is used by the assumed local server, if any)?

In my case, if I want to use the local files, I have to start a (CORS disabled) local server via Node.js, and then use something like new THREE.TextureLoader().load("http://localhost:8080/SomeImage.png") on the resoources I load. Some of them (like videos, for example) require setting their .crossOrigin = "anonymous" as well.

Here is what I get in dev tool :
" 1. Request URL:

http://localhost:1234/images/prvi.jpg

  1. Request Method:

GET

  1. Status Code:

304 OK

  1. Remote Address:
  1. Referrer Policy:

strict-origin-when-cross-origin"

I am getting files from the folder. I am using parcel, everything works fine. I can get all the geometry shapes, change colors… but when I want to load an image, I get 304 instead of 200, unless it is external link

Hmm… these details, apart from the 304 code, look just like mine for correctly loaded images. If the images were base64 encoded texts I imagine they wouldn’t have been stored as .jpg, so I don’t think it’s that. Just out of curiosity, because I can’t quite determine what’s the culprit or the solution, does the Preview tab (the one next to the Headers one, when clicking on the image name) in Dev Tools also displays text, or is it the image? If it’s text, how does it look like?

Sorry for late reply, something came up…
There is nothing on the preview tab, just blank. And now I’m getting 200 OK response and I don’t know why. Size transferred is 4kb, text only. I believe there is something wrng with node server. I’ll try to reinstall it and see what is going to happen. Thank you for your time and effort.

No problem. Interesting how the response changed, but myabe you’re on the right track and checking up the server again will help and hopefully fix the issue - good luck! :wink: