I have a /src folder and Eleventy serves up the images into /_site folder.
On my localhost I'm using the image route: static/img/imagename.png and it works when loading onto the localhost.
However the image disappears when being deployed to Vercel. Wondering what the file route of my image should be.
Related
For a web app I'm developing, all of the images are stored on s3. In the development environment, everything works great and all images load just fine from the external URLs. When deployed however there is no way to load any of the images and they simply default to the alt text.
Steps Taken
added s3 bucket base URL to the next.config.js file
added same URL to ENV variables on the deployed instance
deployed to digital ocean and netlify only to see the name issue
tried using just regular <img> tags
tried using next/image optimized images
All attempts have the same result and the console logs the following error for each image:
This error is for <Image /> components:
GET <vercel_url>/_next/image?url=https%3A%2F<bucket_base_url>%2Fstatic%2Fimages%2Fshowcase%2Fdashboard-desktop.svg&w=3840&q=75 404
This error is for <img /> components:
GET <vercel_url>/<bucket_base_url>/static/images/showcase/view-portfolio.svg 404
I'm not sure what to do I've spent crazy numbers of hours trying to solve this issue
The issue was that I'm an idiot and I was using a URL generation function that spits out windows formatted paths. That's why they worked on the dev environment, because windows normalized the paths to a real URL.
My app is created in next.js and works great in localhost. When I deployed it in heroku, only the front page shows up and all page paths do not work even though they are correctly inputted in the browser. The only page that is connected to the index.js file in my page paths is the front page. Do the other pages need to also be connected to the indec.js file? I am terribly lost with this issue since the site works perfectly in localhost. In heroku every page path besides / has a 404 error. I didn't add any code to this question since no one file seems relevant to the issue. I've been searching all over for an answer to this issue but can't seem to find any relevant information online since the app is deployed successfully it just won't render any file paths besides /.
Thank you in advance for any help you can offer. I really appreciate it!
Applications are ran differently on localhost and when deployed to the server. Since you added react tag on the post, I assume you are trying to deploy react native app on Heroku, there is lots of information on internet how to do it.
For example this post.
Anyway first you need to build your app correctly, so static files would be generated (you didn't mentioned how you are running that app).
To your question:
Relative paths are the same on both local and server, but absolute paths will be different.
But for your 404 error I see that no static content are found on the root path.
I am creating a SPA (single page application) with vue-cli.
I run npm run build script then upload dist files in the public_html folder but didn't work
My hosting service uses direct admin as a web control panel.
I read the deployment guide but didn't help me
hosting service that I use works with Linux, PHP, and Apache
By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'.
Read public_path guide
I am teaching myself Worklight. I followed the Get Started guide provided by IBM (http://www.ibm.com/developerworks/mobile/worklight/getting-started.html).
Examples in the above site use relative path to link to a page or getting images. Is it possible to put a / (foreward slash) in front of each link to make it relative to the root folder? If possible, how can I configure my local worklight server so the links and images work on the app?
I have app set up as below directory structures in the /common/ directory. Many pages load shared header and menu on the page. When I use <a href="/app-pages/page1.html">' or <img src="/images/ImageName.png">, This causes 404. Not Found - http://localhost:10080/images/ImageName.png
home.html
/app-pages/page1.html
/app-pages/page2.html
/app-pages/sub-cat/pageA.html
/app-pages/sub-cat/pageB.html
/shared/header.html
/shared/menu.html
/images
/css/
/js/
/jqueryMobile
FYI, my dev environment is as below.
Windows 7
Eclipse Juno
Worklight 6.0
In a new Worklight application called "test", under the common folder you will have the following hierarchy:
css
images
js
test.html
In test.html, if I will add <src="images/icon.png"/> then once previewing the app the icon.png image located in the images folder will be displayed:
I see that you are also trying to use multiple pages in your app. Make sure to read the Building a multi-page application training module.
I installed an SSL Certificate which required me to switch all HTTP Links over to HTTPs links. I did this by downloading all site files (including the database) and did a find/replace, thus replacing all http:// with https:// then I uploaded the new site files (and .sql file) to the server. And everything appeared to be working. Except that .png images wont load in any browser.
I can't even pull up the image by typing in the direct link in the address bar (with or without the https). Previously the images worked fine, they now just show the red X.
Any ideas on what's going on and how can I fix it?
The site is built with Joomla 2.5. You can see it here: https://www.detourjournal.com/ (Note the two .png images in the footer that are not loading)
It's not your Joomla! setup, for starters it doesn't appear to be Joomla! redirecting calls to SSL in normal pages and it doesn't affect direct file URL for images this way.
You appear to have configured your server to force https (possibly via .htaccess).
It's also not specific to PNG files as your logo, /images/stories/logo2.png is being served without a problem. The same goes for the PNG's in VirtueMart e.g. the close label.
Looking at the header for those images the sizes don't match what is being returned... so it's most likely corrupt images cause Apache to bork.