Can't load static assets with next.js - javascript

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

How to set image src to some "randomName.png" file available in current directory?

I have this scenario to reproduce an HTML implementation for 100+ images of different names.
myPackageDirectory
- index.html
- some_name.png
- script/css files
Currently, I have to manually do the following
pick each image file from pool,
place it into the
packageDirectory, then
rename it to static img.png, then
package(zip) the iteration.
I wish to skip renaming part from xyz.png --> img.png by something like <img src="*.png" /> kind of thing.
"Client-side method"
I've used python to automate iterations, but am looking for some html/js way to pick file just by extension
It seems you want to obtain a list of file names on the server with the .png extension.
If your server allows directory listing, you can do this with client side JavaScript. Otherwise, you'll need a server side solution.
See the answers here: Easiest way to get list of files in the server directory

Load static assets with vue-cli 3.x

I have a vue-cli 3 project setup with the following directory structure:
All static assets are loaded in the public directory and are compiled and built successfully on localhost.
As seen in the image below, guyana-live-logo.png, slide-1.jpg and 970x250-ad.png are all loaded successfully, however, only the logo and the ad image appears in the browser.
What I've tried
Changing the way the image is referenced.
Original - which works for almost all other images
<img src="/img/slide-1.jpg"/>
Test 0 - this loaded the image with a hash appended (slide-1.1b0ahsa.jpg) but it still did not appear in the browser
<img src="../../../public/img/slides/slide-1.jpg">
Test 1 - using v-bind
<img :src="'/img/slide-1.jpg'"/>
Moving the image inside the src directory and the component sub-directory both of which proved futile.
Updating vue-loader
Building for production and serving only the /dist folder
Key notes
The console or my bug tracking software produces no error.
Image format doesn't seem to be the problem, some .png loads while others don't, the same is true for .jpg.
Some JavaScript files are affected. JS files are being called like this: <script type="text/javascript" src="<%= BASE_URL %>js/script.js"></script> in public/index.html
The images will need to be in the same directory or a child directory of the file in which you're trying to access them (i.e. in the Components directory).
Can you also try to access the image via its URL <img src="http://localhost:8080/img/guyana-live-logo.png" />?
This should work, but you may not want to use it this way.
Another possibility you might be able to use is doing this:
<script>
import image from './img/slide-1.jpg'
...
Then in Vue data:
data() {
return {
img: image,
};
},
Then in your HTML:
<img :src="image"/>
This solves issues when trying to access images when building with Parcel Bundler

Image path 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.

HTML/Javascript: Enabling folder access from a subdirectory

I have a simple HTML file with some JavaScript that I would like to run locally (as opposed to deploying to a server). It is embedded inside a larger project whose file structure I would like to maintain. For example, the structure is something like this:
project level folder > src folder containing folders & files I would like to probe
> separate, non-project util folder > HTML & JS files I would like to run against src
I am aware that certain browsers do not allow this for security reasons (as pointed out here), but since I control all of the files - is there a way for the src folder/files to somehow indicate that they will allow the 'separate, non-project util folder' to access them? Maybe some kind of project-specific settings somewhere? I am aware that this can be done in server settings, but as I mentioned above I'd like to be able to run it locally without the need for a server.
The JavaScript that is attempting to access the src files uses RequireJS, in case that helps.
Here is what I ended up doing:
I wasn't able to provide full access exactly this way, but instead I setup a dummy HTML page in the project level folder that clicks itself to redirect to the HTML file located in the separate, non-project util folder. This allowed me to keep everything but that one, very small file separate but not have issues with file access.

Holder.js in Google Appengine (python)

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.

Categories

Resources