I'm attempting to create a site called Mixer and deploy it via heroku
After uploading the site to Heroku, I notice the dynamically loaded images aren't loading, but the imported images are. The code I'm using is:
import Image_Not_Found from '../img/drink_not_found.jpg'
<img src={`../img/${newDrink['image']}`}
onError={(e) => {
e.target.onerror = null
e.target.src = '../img/drink_not_found.jpg'
}}
alt="" className="drink-card-image"
></img>
Now, the error image shows up, but the rest don't. Here's my layout.
>Public
>img
>{images.jpg}
>drink_not_found.jpg
>src
>components
>card.js
The drink_not_found.jpg is loading fine, and when I'm on my local computer the rest of the images are loading as well, until I deploy to heroku. Any thoughts?
Related
I have a few images on a site that doesn't get loaded. I'm using Vercel and Vite's production preview and both give me this error when importing images:
Failed to load resource: the server responded with a status of 404 ()
And, when I reload the page with the browser console open:
GET https://nicole-tongu.vercel.app/src/assets/images/nicole_pic.jpeg
404
Here's how I have been importing them:
<div className="ms-3 home-image-container">
<img
src="/src/assets/images/nicole_pic.jpeg"
className="home-image"
></img>
</div>
When running the code locally, all images' imports work, but I don't know how to make them appear on production.
You can see all my code on GitHub and the app can be found on Vercel
I fixed it in and I sent out a pull request to your
github. you can visit the result here
details:
I pull your repository, and run npm run dev... it works well. image loaded.
but when I build your app(npm run build) and run npm run preview to show the built version of your app, it doesn't work(the image doesn't show in browser like vercel). why? because there was no image in dist directory.
to load images in vite build version, you should have imported them in the header of your home.jsx like this:
import CallButton from '../components/CallButton'
import '../assets/styles/home.css'
// add this one in your header
import NicoleImage from '../assets/images/nicole_pic.jpeg'
function Home() {
return (
<section
id="home"
className="bg-primary text-dark p-5 d-flex caixa-responsiva align-items-center"
>
.
.
.
//rest of your code
.
.
.
and after that, you should inject NicoleImage variable to your src attribute of your <img tag, like this:
<img
src={NicoleImage}
className="home-image"
/>
to sure that it works, run npm run build and see that image file is exist in dist directory, and for seeing the result, run npm run preview command to sure it works on the production
after these steps, you can deploy it on vercel
good luck
I'm trying to open a .html file "resume.html" on my website. This is my "public" folder.
I'm using React, and I'm trying to open "resume.html" in a new tab on button click with this code:
<Resume className="resume" onClick={() => window.open("/resume.html", "_blank")}>View Resume</Resume>
Everything works fine during development. on my localhost: 3000, the resume opens in a new tab just fine. But when I host the site on AWS Amplify, the button click loads "index.html".
I have no idea why the AWS amplify server would be loading a different file than my localhost server.
If you use ReactJS then everything will go through a build step to create the deployment assets that make up the Single Page Application. The result of this build step is what will be deployed to be hosted on AWS.
For navigation in ReactJS it is better to use a routing library like React Router. You can create a new React Component for the resume content and navigate to it using a Router Link. This will work better for the Single Page Application to understand rather than opening a HMTL page with window.open.
I am using Storage and API from aws-amplify
My intention is to get the name of the image from the API and then display it in a tag. Don't know what is wrong.
I can upload images with the following command: Storage.vault.put.
I have set the permissions in the IAM-roles.
The code goes as follows:
I use the following to get the URL and used vaults as the documentation says it is used for private folders:
useEffect(() => {
Storage.vault.get("Image.jpg").then(data => {
setImageUrl(data);
});
});
In the markup I set the with the following:
<image src={imageUrl} width="200px" height="200px" alt=""/>
My AWS structure
I use Cognito to manage the login and the IAM reflects this.
In S3 the images are located in private/${cognito-identity.amazonaws.com:sub}/here
Developer tool Console:
GET https://app-uploads.s3.us-west-2.amazonaws.com/private/us-west-2....... - 404 (Not Found)
I'm loading various images in my site like this:
render () {
const imageUrl = require(`assets/images/${this.props.image}`)
return (
<img
className={this.props.className}
src={imageUrl}
alt={this.props.description}
itemProp={this.props.itemprop} />
)
}
When using yarn start to view my client-side code only, this is working fine. However, in server-side rendering, my images all have src="[object Object]". I'm further surprised that the images aren't being 'hydrated' once the client-side code downloads from the server.
How can I properly load my image src attributes dynamically using server-side rendering?
I don't know exactly why the impact of this was a src of [Object object] for my dynamically imported images, but the issue was my build directory was not correctly referenced in my Express app doing the server rendering.
Changing:
app.use(express.static('/../build')))
to:
app.use(express.static(path.resolve(__dirname, '../build')))
solved the issue.
I have a small Backbone app. In my navbar I have an image. Here is the code:
<a href="#" >
<img src="../app/img/isxLogo.png" width="56" class="navbar-brand">
</a>
This shows up fine when I am in developement. When I push to Heroku, I get a 404 not found error.
Request URL:http://intense-zzzzzz-1111.herokuapp.com/app/img/isxLogo.png
Request Method:GET
Status Code:404 Not Found
What could be causing the 404? Why would the image be found in dev but not when I push to Heroku?
Image now showing
I changed the path to /img/isxLogo.png and it will now show in Heroku, but it does not show in my dev environment. Why does the path change? How would you show the image in both environments?
On your local machine, the root directory set by your web server must be set to the directory above where you app is.
Change the URL to /app/img/isxLogo.png and it should work.
What are you using to serve the app locally?
I would recommend using the same web server/method locally if you aren't already to avoid any surprises like this :)