A frame glb assets not showing up on deployed site - reactjs

We're working on a React + aframe project.
I've been loading glb assets into my scene. When testing on localhost, everything was working fine and I could view the assets on my phone.
However, once we deployed the site, the assets are not visible on the deployed site.
We do see this warning on the console,
THREE.WebGLRenderer: Texture has been resized from (272x272) to (256x256).
How the asset is being loaded:
<a-assets timeout="10000">
<a-asset-item id="sticker-1.1-glb" src="${process.env.PUBLIC_URL}/assets/Models/sticker_1_1.glb"></a-asset-item>
</a-assets>
<a-entity
id="fishes"
gltf-model="#sticker-1.1-glb"
animation-mixer="clip: swimming; loop: repeat">
</a-entity>
We thought the issue might be with the imports as it is in the public folder, however the other png assets in the public folder are loading into the scene fine.

Related

How to import locally images in a React-project

I have a following problem:
I'm trying to upload local images to my react project.
I use the "Create React App".
I'm not quite clear in which folder I should place the images: in the public or in the src folder?
There are different opinions in the forum.
In this project I have the photos in the public folder and just upload them with their name (img.png). On GitHub it seems to work,
but if I want to load it locally via the browser (npm start) then the photos are not displayed.
Tried all the methods described in the forum (../ or ../../ or import img from'' etc) but nothing helped.
GitHub-link
I want the images to load in the local browser.

How to make Vite development server serve images in nested folder

I'm working on a React app, using Vite. Once I build the app, I have no problem seeing the images, but during development, I get the following error in the browser:
GET https://localhost:5173/uploads/2/6337005fd6d4d.png 404 (Not Found)
Images are supposed to be served from a folder at public/uploads. The favicon.ico at public isn't being served either (during development).
Ok, found the answer to my own question: In vite.config.js, I had to set the root of the project, and the publicDir, which by the way, must be set relative to the root.

How to set the nuxt assets url after build

Hello every i am having issue after deploying the nuxt app to subdirectory, now the assets are not found here is the screen shot, the red border represent the assets url
You have to put the image in the assets folder, then you can load your image with:
<img src="~/assets/my_image.jpg" />

Offline static content in React app

I have a react app created with create-react-app. I would like to add an image not part of the react app to the offline manifest. The image is just referenced from index.html. I don't understand how I can include this in the offline manifest.
The react app is ejected.
Put the image in the public folder just as in a regular website and refer to that image. Everything in the src folder is put in a big js file after building so you cant use that

ionic doesn't load images

In my application I have some local images. I can see my images when test in google developer tools with ionic serve and even in genymotion simulator with android 4.4.4 and 4.2.2. but when I install my app on real android device ( I try on Samsung Galaxy S3 and Samsung Galaxy Ground Neo) I can't see my images.
My folder structure is like this:
www
index.html
app
book
book.html
images
icon.png
and in my book.html I try the following url for loading image:
<img src="app/book/images/icon.png">
<img src="../../images.icon.png">
I also move icon.png to root folder inside index.html and try this:
<img src="icon.png">
but it doesn't work.
The way that HTML structure works is that is that you always need to call your files relative to your current file. For example, if your structure looks like:
- index.html
- folder
-image.png
You would need to say src="image.png". So in your case, you do not have to reference the root directory (folder). You can just say images/icon.png. To reference an upper level folder (if it were in the root), you could say ../../icon.png, using ../ for each subsequent folder.
I had the same problem. my images are stored in www\assets\images. I was using the path ../../assets/images/myimg.png and worked in ripple but not when deployed to my android device.
The solution that worked for me was removing the relative path and using assets/images/myimg.png

Resources