I have a /public/static/images/ folder in my React project and I was hoping that I could hide the listing of what images are in there unless they go to the absolute path.
For example, right now if you go to http://website.com/static/images/ it returns the following:
<pre>
KBLogo.png
icons/
logo.png
logo.svg
test/
</pre>
Is there anyway to remove this? I created this application via create-react-app
Related
I have created a new next.js project. Is it possible to have an accessible static html page "outside" the project?
For example the structure would look like this:
.next
components
node_modules
pages
public
styles
aboutus
Now looking at the folder /aboutus/, it will have a structure like this:
css (folder)
js (folder)
images (folder)
index.html
Where the index.html references the css, js and the images.
But when i call http://localhost:3000/aboutus it gives me a 404 error.
Already tried this setup locally, but didn't work.
It turned out a 404 error.
I expect that to work.
Is it possible to have an accessible static html page "outside" the project?
No. Only files that are in the pages folder are generated as pages. pages in NextJS
The closest you can get to accomplish that is by running npm run export and manually insert your "aboutus" folder in the "out" folder. But the project wont have the benefits of These features.
In case the .js is not Next related, have you tried to put the aboutus folder in public/aboutus ?
wondering if anyone can help me. Im following a tutorial which has told me to put the images in the public folder in an app created with create-react-app
'./img/newyork.jpeg'
this is the path the tutorial told me to use for images in the public folder however the images aren't loading and i cant understand why any help would be much appreciated
Build File Structure
You shouldn't keep any image assets in the public folder other than favicons etc See this thread also: The create-react-app imports restriction outside of src directory (TLDR: "This is special restriction added by developers of create-react-app. It is implemented in ModuleScopePlugin to ensure files reside in src/. That plugin ensures that relative imports from app's source directory don't reach outside of it.")
Generally in a create-react-app I would import images like so:
import lovelyImage from 'images/lovely-image.jpg'
and then rendered:
<img src={lovelyImage} alt={''} />
(the example above would assume the images directory is in the src directory (not public))
process.env.PUBLIC_URL + 'your image path'
is a solution I found that works
I am trying to add image to the carousal from the public/image folder in the carosal.js file.
My component tree looks like this:
I wrote " ../../public/image/cover1.png"
but getting an error saying:
Module not found: You attempted to import ../../public/image/cover1.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Assuming this is a create react app project, the public folder is served statically, so instead of directly trying to import the image from the public folder you can simply reference the image in your code without the relative path.
As an example, you could do the following
<img src="image/cover1.png" />
This way you are not actually importing the image file like its a module, but instead you are having the server serve it the browser statically.
Here is the structure of my Hugo theme:
The site with config file is in exampleSite folder. After I run hugo --config ./exampleSite/config.toml command. A few files generated in public folder.
Some folders like about, images are missing.
But when I run hugo command in exampleSite folder. All files are generated.
When I add debug or verbose flags to the command, there is no error at all. What could be the reason?
A minimal Hugo site
To build a Hugo site, this is the minimum setup that you need:
.
├── config.toml
├── content
│ ├── about.md
│ └── first-post.md
├── layouts
config.toml is described in the configuration docs. You'll want at least a baseURL and a title added.
content/ - this is where the writing goes; Markdown documents here get translated into HTML pages. More details in the Content organisation chapter.
layouts/ - this is where the page templates go.
For more info on this, check the Hugo directory structure, part of the getting started guide.
At this point, running the hugo command, i.e. compiling your site, will output the result in the public directory by default. Without any HTML templates, you'll just get a sitemap and some RSS XML.
Cue Hugo themes
In your case, you want to use a ready-built theme, so you need an extra themes directory, in which you can have one directory for each theme you want to use, e.g. themes/my-hugo-theme. In your config.toml, you need to set theme = my-hugo-theme, which is the directory name.
Using a separate theme means that Hugo will use the theme's layouts (themes/my-hugo-theme/layouts/) to generate your site's documents (content/).
exampleSite/
As a convention, themes posted on Hugo's library have an exampleSite/ directory to show off all the available features. Those files are ignored when you use the theme in your own site.
What you could do is copy the stuff in exampleSite over to your own content directory, and run again. From there, you can just change the content and remove what's not used.
Hope this helps!
I have an html file that I've turned into a string to be used with dangerouslySetInnerHTML. Everything renders fine except for the images within that html string. I can't seem to figure out what path I should provide. Currently I have them in a separate assets folder while the js file is in a dir one level down.
Your React .js files' location are irrelevant to the final address you need to provide to your src attributes. That's because a React up goes through a build process (development build or production build) where all the js files are bundled together and your public folder structure will be very different than the folder structure you have in your development (not to be confused with a development build).
In a normal React app setup (say we create it with create-react-app), your final html is rendered in public/index.html where public is the root of your webserver. Now, let's assume you have your images in a folder called assets directly at the root of your webserver. Then your folder structure will look like this:
public/
index.html
assets/
img1.jpg
img2.jpg
Now you need to declare your img tags as follows:
<img src="/assets/img1.jpg">
Hope that helps.