I want to load a placeholder image using holder.js in a static template. In static template index.html I have:
<img src="/static/holder.js/200x200">
I have handlers set in app.yaml for serving static files in a folder called static, so I know that's not a problem, but for some reason holder.js will not generate the 200x200 image I called for (the log files generate a 404 error). I bet this is some sort of handler issue; perhaps App Engine is treating my request as a directory and cannot find it. I need to configure the app.yaml file so that it treats requests to holder.js as a parameter for the file and not as a subdirectory of the file. Can someone point me in the right direction to help solve this problem?
When using Holder.js, the src attribute isn't meant to be used as a real URI. Instead, it's used as an identifier for Holder.js (specifically the domain option). Your code should look like this: <img src="holder.js/200x200"> or <img data-src="holder.js/200x200">. Make sure to include <script src="/static/holder.js"></script> in the document as well.
Related
I use Next.JS to build a small landing page including videos and images. Since the assets are static I assumed the practice here is to create a static folder and the call the videos/images from there.
Somehow Next is not able to find my assets though - how so? When I use them within the public directory, it works fine - but I guess this is a bad practice?
<img height={320} src="/static/images/hero/tag.svg" alt="" className="float-right" />
<video src="/static/video/hero.mp4" playsInline loop muted autoPlay poster="/static/video/hero-poster.jpg" />
In nextjs static file serving works only from public folder.
You add an image to public/my-image.svg, the following code will access the image
return <img src="/my-image.svg" alt="my image" />
Couple of notes must be taken care:
Note: Don't name the public directory anything else. The name cannot be changed and is the only directory used to serve static assets.
Note: Be sure to not have a static file with the same name as a file in the pages/ directory, as this will result in an error.
Both options has valid use cases
Assets - files are bundled directly into compiled chunks. That mean no extra request to load it in runtime and assets are instantly available. Definitely way to go with icons and other "inline" content. (You need to have appropriate webpack loader each file type. Images are supported out of the box but other file types may need manual config)
https://nuxtjs.org/docs/2.x/directory-structure/assets
Static - oridinary static files served directly by webserver. useful for big files, downloads, rarely accessed files etc.
https://nuxtjs.org/docs/2.x/directory-structure/static
In your case I would recommend images to be asset. Video can be static.
One of my html file needs to include a script file, as it often happens, and no matter what I do, the browser doesn't seem to get it.
following this answer: How to include css files into compojure project?
I created a public folder in my resource folder. The structure looks like this:
resources
|-public
|-views
| |-myview.html
|-scripts
|-my.script.js
Inclusion of the file in myview.html looks like this:
<head>
<script src="/scripts/my.script.js"></script>
</head>
When I request myview.html from the server I get it, but all of the types in my.script.js are unknown. The html works as expected when I just load it in the browser (I have to adjust the path to the script file to be relative, of course, and no, that doesn't work either when I request it from my server).
So how do I get my script files (and later css files) to be found by the html in a typical compojure setup?
Turns out I was just missing
(route/resources "/")
in my routing. As that wasn't the problem with the topic I looked at, I didn't figure it out for a while.
Turns out sometimes you should read the code in the question just as carefully as the answer...
I have stucture code like this:
I try to load javascript into php file like this:
But i have an error like this:
This is my html :
And this is another javascript:
And i try to copy paste the link, and i got an error 404 not found. How can i fix it? Thanks.
Permissions
When the host is correct, and the file is in the right place, and you have no other networking problems, you may sometimes still get a 404 because of bad file permissions. If a server does not have permission to access a file, it may send out a 404 error in response. The reason why some "Not Authorized" error is not given instead, is that this would reveal more information about the files than you, the owner of the server, may intend. The way to respond to requests for privileged files without revealing whether or not they exist is to give a 404.
On Windows, you can view and change the permissions from the File Explorer by right-clicking on the file or folder, then going to Properties -> Security -> Edit. For more information, see the notes on permissions on Microsoft's site.
File Types
Besides permissions, a server must also be configured to serve the type of file you are accessing. If files with different extensions are served, but .js files are not, check the configuration of your server to make sure that .js files aren't blacklisted (or not whitelisted, as the case may be).
Directory Location
You should also verify that the files are actually stored in the top-most directory of the web server if that's how you are accessing them. If they aren't, you may need to prefix the path with the path from the webserver root to your application directory. E.g., instead of fusioncharts/..., you may need /path/to/fusioncharts/... or ../../path/to/fusioncharts.
Other Considerations
In your particular case, you should also verify that the files inside the fusioncharts folder are actually structured the way you think. (E.g., is there really a js/[insert name here].js file inside the fusioncharts folder?
If none of that solves your problem, try to take something that is working and gradually make it more and more similar to the files that aren't working. By figuring out at which point you go from a working setup to a not working setup, you may discover the problem.
If you are referring to a file with path: /ui/new-file.js
then,
1.In html file include
<script type="text/javascript" src="/ui/new-file.js"></script>
2.In server.js or app.js whichever you have, include
app.get('/ui/new-file.js', function (req, res) {
res.sendFile(path.join(__dirname, 'ui', 'login-file.js'));
});
Assuming you are using codeigniter, you can use base_url() function to include JS files in your codeignitor view template file.
<script src="<?php echo base_url(); ?>fusioncharts/js/fusioncharts.js" type="text/javascript"></script>
codeigniter default view template is called welcome_message.php and this file is located in application/view folder.
This is how I include js files in my codeigniter projects. Hope this will help.
In the html you can write *script** in the head or in the body, but not in your file js, delete this in fusionCharts.js
<script type=text/javascript>
In fusionCharts.js write only the function without the script
If you are developing locally, try clearing your cache.
Google Chrome likes to use the cached JavaScript files instead of the real ones.
Clearing your cache should resolve the issue.
I have several images in css files and js files and we ASP.Net MVC.
After deploying in the server images are getting loaded from the path
http://example.com/Images/image.png, whereas the actual is in http://example.com/mysite/Images/image.png
I have tried several paths
like
/Images/image.png
../Images/image.png
Images/image.png
../../Images/image.png.
However browser always tries to load it from the Images folder directly under the domain which does not exist.
Let say that you have following structure
MySite
MySite\Content\CSS\styles.css
MySite\Content\Images\img1.png
In styles.css
.myheader{
background-image:url('../Images/img1.png');
}
OR
In layout.cshtml or index.cshtml
<div style="background-image:url('#Url.Content("~/Content/Images/img1.png")');"></div>
OR
<img src='#Url.Content("~/Content/Images/img1.png")' />
one thing you have to make sure that it path is case-sensitive
I am using these tricks in my projects.
I hope it will help you.
Trying to import my js file from my page.
My page is in webcontent/mydomain/templates/page.xhtml
My js is in webcontent/mydomain/test/scripts
In page.xhtml
<script type="text/javascript" src="../test/scripts/test.js"></script>
But still the script is not getting picked.
Can anyone tell how I need to give the path in src.
Try this:
<script src="/test/scripts/test.js"></script>
Provided that webcontent is the root of public web content and thus /mydomain is also a public folder and thus your JavaScript is standalone available by http://localhost:8080/context/mydomain/test/scripts/test.js, assuming a domain of http://localhost:8080 and a context path of /context, then the following should do:
<script src="#{request.contextPath}/mydomain/test/scripts/test.js"></script>
This will generate a domain-relative URL with a dynamically inlined context path, which is much more robust than fiddling with ../ which would make the URI relative to the current request URI (as you see in browser's address bar) and not to the physical location of the template file as many starters incorrectly assume.