I'm working on the vuejs app and on developer mode my app running fine as expected. But when I creating the build and serve its build on local/server its not showing the images which is inside the folder of /public/images/image_1.jpg
Here is the code where I'm referencing the images in the component.
computed: {
locomotion_image() {
return `/images/Locomotion_${this.image}.jpg`;
}
}
in the template consume this computed property
<img v-if="size === 'lg'" :src="locomotion_image" :alt="[$t('locomotion cow ') + image]" class="hygiene-score-images__img mb-3">
the is the development environment image, as you can see the path is correct and images are showing as expected
warning I'm getting when build is complete
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (5.46 MiB)
js/chunk-vendors.e5ec3734.js
css/main.881ab0a7.css
js/main.f96f8547.js
as you can seen here images are showing here.
here the after build screenshot, as you can seen the path is the same but images are loading properly
I found out the solution of this problem, By changing into my nginx file, Because /images/image_1.jpg is relative path and it'll be finding the image on this url like so www.xyz.com/images/image1.jpg.
Website doesn't have any route define like that so wasn't getting the image.
I just changed my nginx file and add location / images section.
root /var/www/html/zinpro-frontend/dist;
server_name hk2.zinprofirststep.com;
error_page 404 /;
location /images {
alias /var/www/html/zinpro-frontend/dist/images;
}
Related
I'm new in next js. i recently deployed my project to vercel. everything is working fine. but images are making errors as shown below
Failed to load resource: the server responded with a status of 502 ()
image URL: https://portfolio-l2jkasia3-shafeequeot.vercel.app/_next/image?url=%2F..%2Fpublic%2Fimages%2Fnetflix.jpg&w=384&q=75
at the same time I have used import images. it is working fine after deploy
On localhost everything is working fine, but when I deploy my website to Vercel the images do not load properly.
images given as below
<Image width={330} height={220} className='object-fill w-44' src={key.image} alt={key.name}></Image>
import images as below (it is working after deploy)
import Cover from '../public/cover.jpg'
<Image className='object-fill w-44' src={Image} alt={key.name}></Image>
Can somebody help me?
i have referred this Images not loading in Next.js application after deploy on Vercel
but no luck
I also had this issue and fixed it by dropping the ../public and just using the path to the image as if I was already operating inside the public folder.
Change the value of key.image to "/cover.jpg"
<Image className='object-fill w-44' src={key.image} alt={key.name}></Image>
You can also try using the img tag instead. This worked with my deployed(to Vercel) nextjs app.
I'm using amazon s3 as CDN, everything is working fine when I run the application using 'yarn dev'(domain added to next config). If I check inspect I can see the following value in the src attribute of the img element:
src="/_next/image?url=https%3A%2F%2Fcf-simple-s3-origin-gallery-hior-021672050205.s3.us-east-2.amazonaws.com%2FslidesImages%2Flogo.png&w=640&q=75"
When I'm running 'yarn build & yarn start' the src attribute set as the following:
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
which causing the issue loading the images, what am I missing here?
I was able to find the root cause for that issue(also reproduced with static images).
I added an unnecessary config variable inside the component which disabled the React client-side and causing the loading issue.
export const config = {
unstable_runtimeJS: false,
};
though this is probably not the issue, I had a similar problem, just make sure that if you are using ReactJS to have className instead of class
I've gone through several Stack Overflow pages and the official Vue guide, but my app still returns 404 results when going to a different page.
The structure of my app looks like this, with a client folder that has the Vue app and a server folder containing app.py that statically serves the index.html in the client/dist folder through Flask.
Contents of static.json are as outlined in the guide:
{
"root": "client/dist",
"clean_urls": true,
"routes": {
"/**": "index.html"
}
}
with just modified root folder to go to client/dist. Running the app locally with npm run serve works, as does opening it up on its Heroku page and clicking on the nav. However, directly going to a page, such as /translate, always returns 404.
I have installed the following buildpacks:
=== readiglot Buildpack URLs
1. heroku/nodejs
2. heroku/python
3. https://github.com/heroku/heroku-buildpack-static
The app is hosted here: https://www.readiglot.herokuapp.com.
On npm run build from the root directory, the dist folder is built by Heroku in the client folder.
Am I missing something? Could anyone advise as to additional configuration?
The answer is in the app.py file - you need to statically serve the file using a catch all route.
#app.route("/", defaults={"path": ""})
#app.route("/<string:path>")
#app.route("/<path:path>")
def index(path):
return app.send_static_file("index.html")
By putting the serve_static_file in the Flask app to redirect from all other routes, 404 only shows up on a true 404.
tldr;
My project is an NPM module that is used by an ExpressJS server. The server needs to specify an endpoint and my module will do the rest. How do I get my module to load the correct html page and grab the correct js/css files from the correct path?
The Problem
I'm running into a problem where I can see the directory structure of the site, using the serveIndex library, and all the files are in their correct directories but for some reason when I try to load any of the files, whether from the serveIndex view or from the actual endpoint where it should load, I get nothing but 404 errors.
Here's an example if someone wanted to use this NPM module from their project.
app.js (their server)
const express = require('express')
const { adminAreaConfig } = require('express-admin-area')
const app = express()
const adminArea = adminAreaConfig(express) // my module being passed the "express" library
app.use('/admin', adminArea) // specify a URL to use my module
app.listen(3000, () => console.log('\n\nServer Online\n\n'))
Here's an image of my projects dir structure after it's been built.
Going off of a console.log(__dirname), which returns <long path string>/express-admin-area/build/src, I then tell my module, using the express reference passed by the actual server in the code above, to look in the views directory with
... import libraries etc ...
const adminAreaConfig = express => {
const adminArea = express.Router()
adminArea.use('/', express.static(__dirname + '/views') // sets my modules views to the "http://localhost:3000/admin" path
adminArea.use('/dirs', serveIndex(__dirname)) // will get into this later
... some other stuff like exports etc ...
This then attempts to load the index.html file in the express-admin-area/build/src/views directory but fails because it can't locate the CSS and JS files inside express-admin-area/build/src/views/static/css or .../js.
First, I know it fails because instead of looking for http://localhost:3000/admin/static/css/styles.css it looks for http://localhost:3000/static/css/styles.css, so that's another problem I need to solve entirely.
Second, looking back at the small code sample above, adminArea.use('/dirs', serveIndex(__dirname)), I'm using the serveIndex library in an attempt to view the directory structure. If I go to http://localhost:3000/admin/dirs I get the correct directories and files in the browser
But now, if I try to view an actual file I'm met with the error Cannot GET /admin/dir/main.js for example if I were to go to http://localhost:3000/admin/dir/main.js, but I can continue going deeper in the directories if I wanted such as the controllers or routes directories from the image.
What I want
I need a way to get these static assets to load. If I point my module to a basic html page with a simple <h1>Hello, World!</h1> then that's what Ill get but trying to load any outside scripts/stylesheets is when I get the 404 errors and nothing loads.
I'll be answering my own question.
The solution is actually pretty simple. The view layer of this module is handled by React, CRA to be specific. CRA will look for some specific environment variables, one of them being PUBLIC_URL. All I had to do was
Create a .env file in the root directory of my CRA
add PUBLIC_URL="/admin"
Afterward, it's just rebuilding the project, yarn build, and reset the server. CRA will then look at http://localhost:3000/admin/static/... instead of http://localhost:3000/static/... for static assets.
I tried to use an image file in my HTML template. But when I run the server and open it in the browser the image is not getting loaded. But if I run the HTML file individually it's working fine. I mentioned the path of images folder in file settings.py, MEDIA_ROOT, also. Still it is not working.
settings.py:
MEDIA_ROOT = 'C:/Users/Vicky/Documents/Django/krish/media/images/'
HTML:
<img src="../media/images/Untitled.jpg" width ="267" height="122">
I also tried giving:
<img src="Untitled.jpg" width ="267" height="122">
How can it be made to work?
I had this problem when I started Django too :)
The Django server does not serve static files by default. Usually you need to use a separate server for this, but in a development environment you can use a shortcut.
Add this to your urls.py:
if settings.DEBUG:
urlpatterns += patterns('',
(r'^site_media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': '/path/to/media'}),
)
Don't use this in production. It is slow, unstable and insecure.