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" />
Related
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.
I store images in public folder, image name is a number from 1 to Image quantity, so I can get image with
<img
ref={this.imageRef}
src={process.env.PUBLIC_URL + `/images/${this.props.index}.jpeg`}
alt={`image #${this.props.index}`}
/>
When I run it on my local npm server images are rendered correclty so I can see them, but when I try to open my gallery from my web site deployed with AWS Amplify, they are not loaded, I see only image alt and image logo.
You can check it out at https://www.diamondcoring.ru/gallery
What's wrong with it ?
I don't know why, but the problem was in file extension .jpeg - it is not handled. .jpg or .png work fine
I have a react app with this project structure:
In my Home component and About component I have two images
With src set to :
<img src="/img/charlie1.jpg" alt="charlie home pic" />
and <img src="/img/charlie2.jpg" alt="charlie about pic" />
So I assume it will start looking in the root folder then the image folder then find the pictures in there.
This works fine when I’m developing on my local machine
The images will display correctly.
But when I build it and move the files to prod the images won’t work
It looks for the image at this path: https://xyz.github.io/img/charlie2.jpg instead of https://xyz.github.io/charlieReact/img/charlie2.jpg
How can I fix this problem?
If I change the image src to : <img src="./img/charlie1.jpg" alt="charlie home pic" />
Then it works in github pages, but then the images won’t display when I’m on my local machine…
It's a good idea to import the images into the JavaScript and use the imported variable whenever you can, and the URLs will just work by themselves.
import charlie1 from './charlie1.jpg';
<img src={charlie1} />
If your page has a root other than / and you have assets in the public directory, you most likely have to do some extra logic in the code.
package.json
{
"homepage": "https://xyz.github.io/charlieReact"
}
App.js
<img src={`${process.env.PUBLIC_URL}/img/charlie1.jpg`} />
I'm hosting an angular 2 app on s3. I'm using redirect rules on the s3 bucket, as defined in the answer.
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<HostName>yourdomainname.com</HostName>
<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
My angular app is then using html5 routing to match the redirect rules:
In app.module.ts:
RouterModule.forRoot(appRoutes, { useHash: true })
This combination works well, with the exception of displaying an image in the assets folder of the website. This is in my navbar:
<img src="./assets/logo.png" id="group-ed-logo" />
I am using the angular-cli, which has the following in the angular-cli.json:
"assets": [
"assets",
"assets/logo.png",
"favicon.ico",
"logo.png"
],
Edit: I have added logo.png to the above and put the logo.png file at the root directory of the src file and then used:
<img src="logo.png" id="group-ed-logo" />
The logo then displays. It would be tidier to have the images in an assets folder. However, it may be that the angular-cli currently doesn't support assets in folders when using html 5 routing.
If the file is in the assets directory, then I am getting a 404 url not found: "http://www.myurl.com/#/assets/logo.png".
For folders, in the bucket 'Create a folder' then add your files to that bucket.
Also, if you drag and dropped the whole dist folder, you may be looking at the inside of the dist folder on the AWS UI, not realizing that you are in the dist folder. Copy only the contents of the dist folder, not the dist folder. -- This happened to me.
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