In my Bokeh server based project I have to use/add a few images that are within the Bokeh project folder. I created a static folder called "static/" within the project folder and basically my code looks like this:
div_img_html = "<img src='static/image.png'>"
div_img = Div(text = div_img_html)
however when running the server I get:
404 GET /static/image.png (::1) 2.00ms
Obviously Bokeh gets the Div command however server doesn't know how to retrieve the actual file.... The actual file certainly is residing within that folder.
Thank you in advance for any suggestions and hopefully for a solution!
For directory format apps, static subdirectories are per-app. That is, the static route is relative to app (and any --prefix as well). E.g. for an app in a directory myapp:
bokeh serve --show myapp
that has contains static/image.png, then the correct code would be
from bokeh.models import Div
from bokeh.io import curdoc
div = Div(text="<img src='myapp/static/foo.png'>")
curdoc().add_root(div)
It's possible some kind of template option could be added to provide this path more easily. I'd encourage you to file a feature request on the GitHub issue tracker.
Related
I have a project in Next.js. I have that upload files and share that in public URL to this project.
With npm run dev first I uploaded files to public folder and it worked fine, but when I change to npm run start and upload files, the files upload to public folder but with URL http://mydomain/fileuploaded.jpg it did not show, is rare but it's there.
I searched on the Internet but I didn't find a solution for this problem.
From Next.js documentation:
Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available.
You'll have to persist the uploaded files somewhere else if you want to have access to them in the app at run time.
Alternatively, you could setup your own custom server in Next.js, which would give you more control to serve static files/assets.
You can also achieve something similar using API routes instead. See Next.js serving static files that are not included in the build or source code for details.
a bit late but if someone need the same.
If your goal is to upload and get picture from your next server, you can instead of using the Next router, getting the image by yourself by create a route /api/images/[id] where [id] is your file name and you manually with fs send the picture back.
something like:
const file = await fs.readFile(`./uploads/image.png`)
console.log(file)
res.setHeader('Content-Type', 'image/png')
res.send(file)
Try and use nginx or another webserver to serve the public directory. That way it will serve newly added files without having to write extra code to serve files in nextjs.
server {
/images/ {
root /var/www/site/public
}
}
I have build a web application using Django Rest Framework and React, I am using IIS for deployment. It works just fine but I have a problem when trying to deploy Django Admin. The style doesn't show. It shows this:
I have tried so many methods to add style to DRF project.
I used collectstatic and added it as application to IIS Manager
I activated mimetype in settings.py to accept .css
I tried to link css files in the to contrib/static with the /static url and added that into urls.py.
None of the above methods were able to solve my problem and I have stuck with this bug for days.
Could you help me to figure out this problem.
settings.py config
Your STATIC_ROOT seems to be incorrect. In fact, it will be the place where all statics will be collect by the collectstatic command.
So it has to refer to a path on your server.
You have two possibilities :
Build a relative path to a folder called "collected_static" or whatever name you want :
STATIC_ROOT = BASE_URL / 'collected_static'
Build an absolute path to a folder in your server like :
STATIC_ROOT = '/var/www/my_proj/statics
In development mode, you don't need to collect static, because django knows how to collect dynamically.
In production mode, you need to collect static, because it will provide and group all your statics inside the specified path.
After running python manage.py collectstatic, what is the response ? And can you see your expected statics in the expected folder ?
I'm trying to load a React app onto an asp.net view (project was initially written in asp.Net, am creating new pages using React for learning purposes and for fun).
When the React app is running in dev move, all images load without any issue with all pathing working.
After building the app using npm run build, the js file and corresponding image files are generated and I place them on a folder on my asp.net application (e.g. Scripts folder).
When I try to view the page, the React app loads and the screen is rendered, but the images are all broken as the website can't find them.
After looking to see why the images aren't loading, they're getting a 404 not found error due to the images trying to be loaded from the current URL, rather than where the js file and images are stored.
For example, the view which loads the React app is on https://localhost/Home/ReactPage
And ReactPage.cshtml has the following in it:
<div id="thisIsTheReactDiv"></div>
<script src="/Scripts/ThisFolder/app.js" type="text/javascript"></script>
The React app js is in the Script folder in the project, so to access it, the src has been put as shown above. To access the image you'd have to do something like https://localhost/Scripts/ThisFolder/image.png
At this stage what it's doing is the image is being linked to https://localhost/Home/ReactPage/image.png which causes a 404 error.
Are there any webpack configs that can be done to make it point to a specific path before it gets built?
Is there any way to make the React app when building for PROD update the image relative paths so it looks at a specific folder rather than trying to get it from the current path?
Alright, after a few hours of searching (which lead me to post this question), I've figured out how Webpack works with relative pathing now.
Looks like there's a section called "publicPath" in the output setting where you can type in to get the path relative to where your React JS file is deployed at.
So it looks like typing in
publicPath: "/Scripts/ThisFolder/",
will make the relative path to start from there so all images will load from that URL.
As seen from this Stack Overflow link: What does "publicPath" in Webpack do?
My less style sheets are located in my /public folder for now. I'm trying implement them on my meteor app but to no avail.
This is the error I get:
The stylesheets are located in the /less folder, which is inside the public folder, so the URL should be correct. By the way, all those files that are in the screenshot above are files that import dozens of other variables located deeper in the folder.
I also checked and I have the latest version of less installed. Any help would be appreciated.
The public folder isn't the right place to store the files. Files stored in a “public” folder are served to visitors. These are files like images, favicons, and the “robots.txt” file. So they get served 'as-is', not processed by LESS and served as CSS.
More about Meteor folder conventions.
After discussion in the comments, it seems something is not working right in your less compiler, the less file should not be in the public folder, as already mentioned, and you should not need to include it with a script tag. You can follow these steps to create a new app and test less and see if you can find a difference between this and your current app.
Create a new meteor project
meteor create test
Add less
cd test
meteor add less
Start your server
meteor
add a file sytles.less to the top level folder with this...
.fun {
color: red;
}
Update the test.html file to add the fun class to the text output...
<div class="fun"><p>You've pressed the button {{counter}} times.</p></div>
Load the page, the text should pick up the class and become red. No link to the styles.less file needed. You can try moving it around to different folders, it worked fine from client for me as well. Look around and see what else might be different.
If you still have issues, try providing more information on how the project is set up.
I'm testing out some old code and I'm getting an error and it looks like its with these lines of code:
var targetFile='../../../../../public/image1.png';
var sourceFile='../../../../../../game4-dirs/public/image2.png';
fs.writeFileSync(targetFile, fs.readFileSync(sourceFile));
The error I'm getting is:
Error: ENOENT, unlink '../../../../../public/image1.png'
I seem to vaguely remember that public and game4-dirs aren't accessible like this relatively to the product but relatively to where meteor is installed to (or something like that, I can't quite remember).
Has this change in version 1.2.0.2? I was originally using v0.9.3.1
Thank you :)
If your Meteor application lives at myApp on disk then files under myApp/public will be available at root in HTML /. This means the url for image1.png should be simply /image1.png.
It looks like ../../../../../../game4-dirs/public/image2.png is trying to access a file that is not below your meteor app's root directory. Meteor won't allow this on the client for obvious security reasons. If you want to use image2.png you should move it to your app's /public directory and then refer to it in html with simply /image2.png