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.
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'm using Hugo to generate a static site. I'm making use of Hugo's image functions to create different sized versions of the same image (160px, 240px, and 480px).
That's all working fine but Hugo also makes the original image available (e.g. IMG_7307.jpeg) in the public directory too. I don't want to publish the original images. How can I tell Hugo not to include them?
You should use Hugo's Build Resources options in your page's front matter. See below for an example:
---
title: Your Page's Title
_build:
publishResources: false
---
Hello, world!
Any resources in this page's bundle will not be copied into the /public directory unless their .Permalink or .RelPermalink is used.
What are the possible solutions this problem: I need to include various sound files to a react app (build into a kiosk with nwjs) on app startup.
Let me explain the expected behavior - I have a nwjs kiosk react app that will run on a Windows machine.
It should grab some UNC paths for sounds over rest api on app startup.
I need to include these paths as resources (located outside the src folder) in the app in order to play the sounds.
Is it even possible?
Linking from the project's src folder is clear to me. But how to link paths outside the src folder when I don't even know the paths beforehand?
import OKSound from "./OK.wav";
Thank you!
Looks like there is no issue with playing sounds from "outside" with the audio tag, but it's really playing a sound only after creating an exe with nwjs!
const url = "http://example.com/sound.wav";
<audio autoPlay>
<source src={url} type="audio/wav" />
Your browser does not support the audio element.
</audio>
I have a create-react-app that needs to embed an html file (along with its own JS and other files) into an iframe on one of the components. I've searched the Facebook react docs on public folder (which says it should work), various other stack overflow questions to no avail.
I added the folder ixoearth containing the external files into public folder. Folder structure
When I access it in dev mode (localhost:3000), or in prod mode from the network IP it works (eg. 192.168.1.128:63738 ). but as soon as I attempt localhost production mode it doesn't find any of the files in the public folder.
Here's my iframe URL:
iframe src
When using create-react-app you need to use a special PUBLIC_URL variable like is mentioned in the docs. This will generate the right path during the build phase so that it works in production.
So I am using a JSON that returns a lot of data about the user including pictures. The problem I am facing is that I believe the relative path to the images folder is correct however for some reason it is saying in ng-source="relativePath" instead of the image. The only conclusion I can come to is either the path is wrong or there is some sort of import I must do for the images to be used in the project.
<div ng-repeat="results in userInfo.images">
<figure class="img">
<img data-ng-source="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" />
</figure>
</div>
I have tried source, ng-source, and data-ng-source. When I view in console and on the html for image src it shows the relative path /images/profilePicture.png.
My project has the following structure:
Repositry Name
app
css
home
home.module.js
home.tpl.html
images
profilePicture.png
js
resources
app.js
index.html
Using best practices the index.htlm is the container for the single page application. We are using the home.tpl.html page that is injected into the index.html container page.
I have tried switching the path to go directly from index.html -> /images/profilePicture.png as well as from home.tpl.html -> ../images/profilePicture.png.
I could not find any posts relevant to my situation but I believe perhaps you need an app.use or some sort of injection method to add the folder of images to be able to be used?
Note: I am not sure if this is helpful however when I run grunt build instead of serve I check the dist folder and the image folder does in fact have all of the images.
Change your <img data-ng-source declaration to just use ng-src:
<img ng-src="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" />
More details at w3schools: ng-src