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
Related
I'm just starting React and I'm confused on how to start adding my previous static website code into the react app. My react app contains a folder called public and a file in it called Index.html and it seems the changes in Index.html effect the website. But I've seen lots of videos and online forms where people add their website code into the App.js file located in src using JSX instead of the public folder.
I have 3 html files in my old static website and I'm wondering where to put the code from these files.
I also have node.js as the backend server but don't know if that should effect the answer.
Thank you :)
I would consider transforming the HTML code into JSX and make components out of it, that way your set up better for future changes.
If you want to keep as HTML code, you can implement it as an <iframe src={"yourComponent"}/> into your App.js.
Keep in mind that your HTML code should be stored in the public folder, the path that you put in the iframe will start at the public folder.
For example, you have a folder html in your public folder:
export default function YourComponent(){
return <iframe src={"/html/yourcode.html"} />
}
I have a create-react-app project in which I want to link to a pdf file I have saved in my project. I suppose my questions are twofold:
1) I'm not sure where exactly I need to save the PDF file (src folder vs public folder)
2) How do I properly link to the pdf file? Right now I have something like this:
Resume
and it's not displaying - it changes the URL but doesn't take you to the PDF.
Any advice greatly appreciated!
You need to have the file in the public folder. If you want it to open in a browser, that's what it will do. If you want to force users to download, you can add the 'download' attribute to the anchor tag.
Place the file somewhere in src/, for example src/static/my-file.pdf.
Import the file at the top of your component, like import myFile from "./static/my-file.pdf"; (path is relative to src/).
Reference the object in your a tag: <a href={myFile}>Link to My File</a>
I had this issue in two different areas of my project, in the App component in the src folder and in a link from a child Navigation component. I created a 'docs' folder in the src directory and used require syntax to link to my file and it worked for me.
In the instance of the navigation component I accessed the file by changing the directory up two levels.
<Link href={require("../../docs/FILE_NAME.PDF")} target="blank">
Resume
<Link>
In the instance of the App component I searched in the same directory.
<Link href={require("./docs/FILE_NAME.PDF")} target="blank">
Resume
</Link>
Adding "download" helped me using Create React App
<a
href="/pdfname.pdf"
download
>
Download Resume
</a>
pdf location:
in public folder
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'm building a multiple page website, and i would like to know what is the best way to organize folders for each page?
1
This is what i did:
I created a main folder named: www.mywebsite.com
2
And in that folder i created a folder for each page:
3
in the assets folder i have js, css, img
Is this the correct way of doing it or is there any better way, i know i can import, in my sass file other sass files and create a main file, but im not sure is that a good way?
You don't need a folder for every page. Just put your html in root folder and make a directory for js, images and css.
Your pages don't need sub folders, they're just for assets that are going to be called in i.e.e an images folder for your images and an assets folder for your CSS or JS files. If you add your pages to a sub folder then you'd need to add that into the URL: string i.e. mywebsite/home/home.html. Also, your server is looking in the root folder for home.html, or index.html (dependent on server), so it won't know where to point when you just type in mywebsite.com
Don;t forget to account for the folder paths when calling any of these in your HTML files i.e. your menu can just call '/home.html', '/about.html' etc While anything in a sub folder will need to be referenced as such i.e. 'images/image.png'
There's no need for that much folders - you can put all files in the root folder or in separate folders (that lie in the root folder) for html, css, js, php and so on
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