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.
Related
I'm currently working in a POS system and i'm writting the code in net core(web api) with vue as spa and mssql for my database.
I thought at first to use some storage service like aws-s3 or azure-storage ones to fetch the images from there, but I couldn't keep on going that way because there were extra costs, so I was requested to upload images to server better. So, now i'm having an issue and is that, the vue app has to be precompiled by babel when going to publish and therefore i can't changes the files in dist folder when running, so when i do it on dev stage (my machine) I see it working as good as possible, file uploads to folder ok and after compiling back, it will show the image. But, how do I accomplish this in prod stage?
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 use Play framework 1.2.x
I use PDF module renderPDF to generate PDF from HTML. I would like insert a image into the PDF.
Im trying to download image from controller downloading in the HTML which will be render as PDF as like this
<img src="#{AwardController.getSignature()}">
From the forums I found that we need to define play.pool in application.conf, So I defined it and works well in local environment. But It doesn't work in QA or Prod environment where we have two processors, so I thought it would take nbprocessors+1. I tried both defining play.pool and not defining. But there is no luck in QA/Prod environment. Please help me to resolve
UPDATE: It working when http request, but not works in https request. Do we have any settings anywhere to resolved this
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 have imported a website using Import of expression web 4. Works great but the pictures are remote URL (http) links. Is there anyway to force them to be downloaded and the url of the img pointed to the local saved image?
Or is there a feature where i can right click on an img and force it to be downloaded locally in expresion web 4?
I can't seem to figure it out.
I thought Expression Web does this automatically upon saving the HTML file?
Otherwise, try downloading the website completely offline (e.g. with HTTrack) and work with this version from within Expression Web.