I'm making a simple chat app with meteor. My HTML is:
<body>
<h1 align="center">tomomi-chat</h1>
<img src="original.gif">
<div class="container" align="center">
{{>entryfield}}
</div>
<br>
<div class="container">
{{>messages}}
</div>
The image won't load on the local server. As the app is extremely simplistic, there are no folders besides the '.meteor' folder in the directory. The .js, .css, and .html files are all in the app directory.
Even if I host the image and use an external link, the result in the same. Why is meteor blocking images from my app?
deployed: http://tomomi.meteor.com/
You should create a folder named public in your application root folder.
From the Meteor documentation:
/public
Files in /public are served to the client as-is. Use this to
store assets such as images. For example, if you have an image located
at /public/background.png, you can include it in your HTML with or in your CSS with background-image:
url(/background.png). Note that /public is not part of the image URL.
To elaborate on this, I would add images asset directory in the public folder like this and serve it via like this
images/transparent.jpg
Create a /public folder. put your images there.
Put assets in PROJECT/public folder and when you specify link in tag, just use "xyz.jpg".
Thats it! The URL does not include /public folder in it. It is very very taken correctly by meteor framework.
CORRECT -> "xyz.jpg"
INCORRECT -> "/public/xyz.jpg"
If you are Windows 10 user make public folder like that and call it in simple way
Related
I am new to nextjs and trying to export my application as HTML after I run npm run export
When I use the <img /> tag some images do not get displayed on the webpage.
The question is, can anyone advise me on if I should load my images from the public folder or the asset folder because currently, I am loading from both folders.
Next.js serves images and other static files, under the public folder in the root directory. Files inside the public folder can then be referenced by your code starting from the base URL (/). This is further explained here
You don't need to load from an asset folder, create/store your images to your public folder and link them to the Image tag
HTML File :
<div>
<img src="New-Google-Logo.png"/>
</div>
Here the New-Google-Logo.png is in the same folder as in the html file. But after ng serve the html page loads with other details, but not the image. Tried by directly giving a link for an image (like www.google.com/images/x.png), it works, but local file is not loading.
Folder Tree :
src
-app
-logincomponent
- logincomponent.html
- logincomponent.css
- New-Google-Logo.png
- logincomponent.ts
-homecomponent
- homecomponent.html
- homecomponent.css
- homecomponent.ts
Here the New-Google.png is referred inside logincomponent.html as given above.
Try 2 :
src
-app
-logincomponent
- logincomponent.html
- logincomponent.css
- Images
- New-Google-Logo.png
- logincomponent.ts
And referred in the html like :
<div>
<img src="./images/New-Google-Logo.png"/>
</div>
Both these didn't worked out.
If you are using angular-cli then all your static assets should be kept in assets folder. Then you should give path as
<div>
<img src="assets/images/New-Google-Logo.png"/>
</div>
When you serve the project all static assets needs to be served to client in order to display it on client. Angular cli build and bundle entire project in js files. To serve your static assets you can follow two ways
put all your static assets in assets folder which angular-cli serves with default .angular-cli.json
or you need to make entry of the static assets folder in .angular-cli.json file in array named as assets as my images folder is in static folder and static folder is at same hierarchy level of assets folder
"assets": [ "assets", "static/images" ]
change path to
<img src="assets/images/New-Google-Logo.png"/>
and add height and width
<img src="assets/images/New-Google-Logo.png" width="200" height="100">
If you create project using CLI you will have one assets folder just create one image folder inside it and paste your all images inside it of .png type then give
reference src="assets/images/AnyImage.png" inside your html it will load the images. Actually you pasted your images inside loginComponent folder. Try this it will work.
if you have references like this in your css files where images are referenced as below
.topmenu a:hover {
background:url('../images/topm_bg_right.gif') right top no-repeat;
color:#fff;
}
then you may have to add the image extension wild cards in the permit all list of your
WebSecurityConfig class as shown.. especially when you have bundled your app with both angular and spring boot together ng build and moved to the static folder
.antMatchers("/","/*.jpg","/*.png",
"/home","/assets/**",
"/polyfills.js",).permitAll()
I've got a basic website, 100% frontend. It resides in a folder somewhere on my computer during development, and will be hosted on a free webhost. The index.html is in the main directory. There's also a css, js, img folder in the main dir. Because this is a Windows PC, this folder is not the root directory (C:) and I'd rather not have my website in the root dir.
I've noticed that if I put a url in a css stylesheet located in C:\filepath\mainprojectfolder\css\, like so
background: url("img/image1.jpg");
This is interpreted as C:\filepath\mainprojectfolder\css\img\image1.jpg (Interpreted as starting from the same folder that the stylesheet resides in), when the actual file is in \mainprojectfolder\img\image1.jpg, and having url("/img/image1.jpg") will be interpreted as C:\img\image1.jpg
How do I properly organize my website directory? Is there a standard for this? I have no idea how this works on an actual web server, but since this is a simple website, I'd expect that this works the same on both my regular computer and a webhost.
Project Folder
html files You put the html files in the project folder not a dedicated html folder
css folder
javascript folder
fonts folder
images or img folder
hope that works
The problem I am facing is this:
<div data-role="footer">
<a class="ui-btn" href="RV2.cshtml">Anchor</a>
<p>THINGS WRITTEN IN FOOTER</p>
</div>
In href, I am passing the name of file as it is, because RV2.cshtml is in Views folder and this file, from which I am calling RV2, is also in Views folder. But its not working this way. I have to put RV2.cshtml in Assets folder and then this HTML link starts working.
Why is that?? And I want all my views in Views folder not in Assets folder. What should I do to achieve that??
Here is the snapshot of folders:
Now this works fine.
But I want it the following way:
It is just not possible for the WebView to access stuff outside assets. The files outside get compiled, while assets are not being touched and just packaged with the APK file.
The physical folder structure on my web server is:
inetpub
oo|
oo|_wwwroot
oooooo|
oooooo|_MyApp ----> this is the root folder of my web application
oooooooooo|
oooooooooo|_images
oooooooooo|
oooooooooo|_styles
oooooooooo|
oooooooooo|_pages
I have an html file (test.html) under the pages folder. I want to link to other files (eg. stylesheets and images) via absolute paths. So, I have a line of code similar to this:
<img src="/images/roundbutton.png" />
When the page is rendered, the image is not displayed, as the "/" tells it to look for the image in a folder wwwroot/images.
Is there another way to use absolute paths to refer to the application root, instead of the site root? Or is using relative paths the only other option?
Yes, use the <base> element.