NEXT Image not Loading in production - next.js

I am using NEXT to build my web app. During my dev server, everything runs smoothly and all images appear as expected but when I run next build and then next start the image disappears in the dev server.
Not sure why this is happening can someone help me?
My folder structure is as shown below:
- public
---- pictures
------ icons
-------- iphone
---------- phone1.png
And here's how I put it in my component:
<div className={classes['stack-phone-v1']}>
<Image
alt={'phone-image-1'}
height={567}
width={284}
src='/pictures/icon/iphone/phone1.png'
/>
</div>

Make sure to follow the casing as it is, the fileName must be typed exactly similar to what it is and that would very likely solve your
issue. No extra whitespaces, no additional symbols only file name as
it is.
On following up with other forums, I realized this was a very silly mistake from my side. While running images in dev server the casing doesn't matter, my image was iphone.PNG and I was reading it as iphone.png.
This is really important as it goes undetected in dev server and in production it won't load. I have seen a huge github thread for the same and suspect that this is the cause:
Generally when you see your files getting loaded but some of them not loading make sure all of them match casing exactly as they are named. Changing the import statement resolved my error. I hope this goes helpful to someone who may face same issue in future.
I just changed:
src='/pictures/icon/iphone/phone1.png'
to
src='/pictures/icon/iphone/phone1.PNG'
as original filename was phone1.PNG

I had a similar issue and am able to solve it by not leaving empty space " " at the end of the image path ` {
name: 'Sunday Afolayan',
imagePath: '/assets/team/Sunday-Afolayan.png ',
title: 'Member'
}`
and am able to solve it by removing the empty space at the end of .png
` {
name: 'Sunday Afolayan',
imagePath: '/assets/team/Sunday-Afolayan.png',
title: 'Member'
}`

Try install npm i next-images and
add next-images to next.config.js file.
const withImage=require('next-images')
module.exports = withImage()

change from src='/pictures/icon/iphone/phone1.png' to src='pictures/icon/iphone/phone1.png'

Related

i added background-image on my cite but it doesn't work

I absolutely sure that i pointed correct way to file. And i have no idea why it doesn't work. Probably somebody already met this problem.
css file:
how it looks in cite:
Mistake in DEV tools:
Any support appreciated
I tried to point different way to image and make background color white but it doesn't work
The error says the file can not be found. The file path is incorrect. File paths are hard to figure out, so you can copy the path with VS code. Just check file paths and everything will work. In the future, "try uploading text code instead of an image of the code". (Stack Overflow Guidelines) Also, this may work in production, it might be because its on a local host not a web server.

VSCode not commenting css.liquid lines correctly

I've been having a problem when trying to comment out a line in a css.liquid file with the VScode shortcut (CTRL+/).
Whenever I do this it puts {%\s*# in front of the line and doesn't comment out the code. I tried disabling all extensions but it's not helping. I haven't touched any settings. When I switch to CSS or Liquid it will comment out fine, but Liquid CSS doesn't work.
Does anybody recognize this issue?
===== This ended up being a problem with the extension itself, it has since been fixed!
I see this issue has been reported lately: Incorrect comment blocks in Liquid files with this extension enabled.
I see this in the liquid css language configuration file:
"comments": {
"lineComment": "{%\\s*#",
"blockComment": [ "/*", "*/" ]
I don't know what the lineComment value is supposed to be but I have never seen a regex value there in other language configuration files - so it may be a mistake.
I built an extension which may be able to help until the language configuration file is fixed: Custom Language Properties.
Install it.
Run the command Custom Language Properies: Check for new language extensions.
Make this setting in your settings.json:
"custom-language-properties": {
"liquid-css.comments.lineComment": "",
}
If this doesn't work immediately, try a reload of vscode.
This basically sets the lineComment's to null and so the blockComment will be used instead. I am not familiar with Liquid comment styles so let me know if that is not how line comments are supposed to work. Demo:

Angular translate, Using staticFilesLoader not working

I'm trying to localize my app with angular translate.
here are my modules :
angular.module('myapp', [
'angular-meteor',
'ui.router',
'ngMaterial',
'ngMessages',
'ngAnimate',
'ngCookies',
'pascalprecht.translate'
]);
Then my config :
angular.module('myapp').config(['$translateProvider', function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'client/lib/translation/',
suffix: '.json'
});
$translateProvider.preferredLanguage('en-US');
}]);
my en-US.json file content :
{
"TITLE" : "hello"
}
And I'm testing it with this html :
<h1> {{"TITLE" | translate}}</h1>
I tested it with a table in a variable and it works well, the issue seems to be that my .json is not found or ignore, because it display
TITLE
instead of
hello
I'm currently working on the same issue. What it seems to be is that the digest cycle is running too early due to the external file/s being loading asynchronously.
A workaround: In your HTML use the attribute directive instead.
Example:
<p data-translate="TITLE"></p>
Disclaimer: This may not be the best solution, I am still learning AngularJS myself!
Actually I found the issue, I had to put my locales files in the public folder. So this is fixed.
This is a fully working example:
http://plnkr.co/edit/Ibq4EaFcvyUPGpqb81Jo?p=preview
To use a translation one can also use something like
{{"TITLE" | translate}}
or:
<h2 translate="TITLE"></h2>
I also had issues with loading the files, I eventually found the starting path seems to be the www folder.
Then in the config start without a forward slash, so this is what works for me in my app config:
.config(function ($translateProvider) {
//$translateProvider.fallbackLanguage("en");
$translateProvider.determinePreferredLanguage();
$translateProvider.useStaticFilesLoader({
prefix: 'js/translations/locale-',
suffix: '.json'
});
$translateProvider.use('en_US');
$translateProvider.preferredLanguage('en_US');
})
I found it by using the chrome debugger (chrome://inspect), it shows errors in the console that are not showing up in the usual terminal when running ionic with -lc.
I hope that helps anyone :)!

Why my image source is not working for my current local machine but it's working for the web sources?

I have a div and I want to show images as innerhtml using the back end C# code. So that I can generate them as I want them to. In here for innerhtml everything is running fine but the images. While I am giving it a path from my current localhost the images are not showing but while I am putting an web url its working why?
Even if I tested taking the suggestion from the visualstudio like I put a static image in front end and took its path but its still not working. I user the server.mappath(test) this function too.
test = "App_Data/images/37id4.jpg";
divfifth.InnerHtml ="<img src='"+test+"' />";
This says the path is not found here is my code given.
if anyone can suggest me to generate these in better way please suggest.
Hello #Borshon Aeolus Saydur , Its a nice question. Try to give add path like "~/images/.." format. instead of "Images/..".
i have solved it by moving my image folder one layer up.although i dont know what was the wrong in previous layer.but its now working after moving it to its upper layer..

ASP.NET Bundling - Bundle not updating after included file has changed (returns 304 not modified)

I am trying out ASP.NET Bundling with ASP.NET MVC 4 application. The situation is that I want to make a CDN style service, which has JS and CSS files to which you can address from other sites with this type address: http://www.mycdn.com/scripts/plugin/js, which bundles and minifies all included .js files.
My bundle config for one file looks like this:
bundles.Add(new ScriptBundle("~/Scripts/plugin/pluginjs").Include("~/Scripts/plugin/jquery.plugin.js"));
However, when I do this, the bundles are not getting updated even after I change the original js files. I keep on getting 304 Not Modified, when I refresh my browser, and the content of the minified file is not updated. How can I make bundles update, because it is useless to have bundles with old content? I tried out every way, but could not figure out a solution.
I just had the exact same problem. I have a folder with 2 CSS files:
~/Content/main.css
~/Content/main.min.css (pre-existing from my previous manual minification process)
My bundling code is this:
bundles.Add(new StyleBundle("~/css/main").Include("~/content/main.css"));
No matter how much I changed my main.css the output was the same url with the same contents:
<link href="/css/main?v=6Xf_QaUMSlzHbXralZP7Msq1EiLTd7g1vId6Vcy8NJM1" rel="stylesheet"/>
The only way to update the bundle was to rebuild my solution - obviously not the best approach.
However as soon as I deleted main.min.css, everything started to work just fine. Playing a little more I discovered that if there are both main.css and main.min.css, then updating main.min.css will actually update the bundle... Weirdness, but at least predictable.
After fighting to figure out what makes the bundle cache refresh I came to a few conclusions that will hopefully help others:
If .min files ARE included as part of the bundle:
release mode + change min js code = cache refresh
release mode + change non min js code = no cache refresh
debug mode + change min js code = no cache refresh
debug mode + change non min js code = no cache refresh
If .min files are NOT included as part of the bundle:
debug mode + change js code = no cache refresh
release mode + change js code = cache refresh
Notes
By debug mode i mean web.config compilation debug = true (and
BundleTable.EnableOptimizations = false or is omitted)
By release mode i mean web.config compilation debug = false (and
BundleTable.EnableOptimizations = true or is omitted
Be sure you are actually making code changes. Changes such as spaces
and comments do not affect the resulting minified js so the server is
correct in that there are no changes (so the bundle cache is not
refreshed).
Please note that if you are using Google Chrome the caching is quite aggressive. To ensure nothing is cached, you can do Ctrl-Shift-I to bring up the developer pane. Go to Network and click Disable Cache. Ensure you keep this open. Now refresh the page. Your cache should be cleared and the file changes should be reflected now.
Okay, here's my story. I disabled generation of min files for less files in Web Essentials. Old min files were not deleted, and bundle thingy saw those instead of updated CSS. Good luck!
EDIT
Sometime later I spent another good 2 hours on the same issue. This time it was my fault I guess - I forgot the leading tilde, i.e. I wrote
Scripts.Render("/js/script")
in lieu of
Scripts.Render("~/js/script")
For whatever reason it sometimes worked, and sometimes it did no such thing.
The bundling operation is case sensitive. Make sure the filename has the proper case.
I had to change a line in my BundleConfig.cs:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/Site.css")); <-- Uppercased.
I actually decided to not to use System.Web.Optimization for this task, but I found Microsoft Ajax Minifier, which is also included in WebGrease.dll, which comes with MVC4 System.Web.Optimization library. I wrote the following function, which I then called in Application_Start for each minified file:
public static void MinifyFile(string virtualPath)
{
string fullPath = HttpContext.Current.Server.MapPath(virtualPath);
string extension = Path.GetExtension(fullPath).ToLower();
string targetPath = fullPath.Substring(0, fullPath.Length - extension.Length) + ".min" + extension;
if(File.Exists(fullPath) == false)
{
throw new FileNotFoundException("File not found: " + fullPath);
}
string input = File.ReadAllText(fullPath);
string output;
if (extension == ".js")
{
Microsoft.Ajax.Utilities.Minifier jsmin = new Microsoft.Ajax.Utilities.Minifier();
output = jsmin.MinifyJavaScript(input);
}
else if (extension == ".css")
{
Microsoft.Ajax.Utilities.Minifier jsmin = new Microsoft.Ajax.Utilities.Minifier();
output = jsmin.MinifyStyleSheet(input);
}
else
{
throw new NotSupportedException(extension + " is not supported for minification.");
}
File.WriteAllText(targetPath, output);
}
Now, my application is minifying all files on Application_Start.
I'm not sure the feature as it currently stands will really support being a CDN, as it relies implicitly on the url to contain a hashcode to prevent browser caching.
But I can try to help you try to get there, and maybe its possible today... One issue that might potentially be a roadblock is that the BundleHandler will return 304 on any bundle requests that contain the IfLastModified header, since the assumption is that the browser cache is always valid due to the fingerprint in the url.
Can you add some details about how you are rendering references to the bundles? Are you using something like Scripts.Render("~/Scripts/plugin/pluginjs")?
Your bundle script tag should look something like this:
Good: <script src="/fbt/bundles/js?v=wvLq7H7qEZB2giyIRn7aEZAxhHOb2RfTYYh2HMd9EqM1"></script>
If your script tags are referencing the raw bundle with no version string, that would likely explain the caching issues you are seeing:
Not good: <script src="/fbt/bundles/js></script>
I know its been a while since this was updated but I have found I just need to wait a couple seconds to let the bundle catch up with my css changes. I have the bootstrap less files being compiled into a css and min.css and its definitely not instant to see my changes. For me it was about 10 seconds on a fast pc with an ssd. Your miles may vary based on your system specs.
I saw this answer but none of these were the case for me.
There were certain CSS rules that were making the styles bundler fail and i was getting the same hash, even if i made changes to the CSS file. It was all working correctly before for me.
In my case the violating css selector rule was -
#globalSearch.searching { ... }
If i made this just
.searching { ... }
It all starts working again and any changes i make to my css file the bundler hash changes correctly.
Just adding this answer as it might help someone.
For what it's worth, I had the same problem just now with one js file inexplicably refusing to update no matter what (rebuild, forced cache clear etc). After a while, I switched the client debug tools in IE on (F12) to start watching the network traffic, and this act alone forced the JS file to refresh. Go figure, but it worked.
The Issue for me was I had Fiddler running. After I close dit and rebuilt my solution it was loading the changes in the js file for me.
I had a similar problem. In my situation, I had a CSS file referenced in a style bundle and had that bundle referenced in my MVC view. I also had the "EnableOptimizations" flag set to false in the bundle code.
Despite all this, the view refused to update to include the new CSS file.
My solution was to create a minified version of the CSS file and include it in the project and it started working. I have no idea why this would be the case since that minified file is not referenced anywhere (even after the view updated) and shouldn't even be considered since the code is set to not be optimized. This is most likely a bug (or a feature) of the bundling functionality. I hope this helps someone else running into this problem.
Make sure your app is really being deployed in Release mode and that your host is fiddling with settings. I was having this issue, but after investigating, I realized my files were not actually being bundled. I was deploying in Release mode, but for some reason (I suspect host), I think my app was really deployed in debug.
I had to set the following at the end of the BundleConfig.cs file to force bundling, which in turn forced the updated file to finally show in the browser.
BundleTable.EnableOptimizations = true;
I had this issue today and I went through all the answers but my problem wasn't solved by any of the solutions here. Later I found that this was happening because there was an error in my CSS. One of the urls was not closed (the last single quote was missing).
This caused the css file to have a syntax error and it didn't compile for the Bundleconfig. I suppose there would have been a message in the Output log, but I hadn't checked.
If this is happening to you in 2020, try making sure your CSS does not have a syntax error.
Just update your System.Web.Optimization by NuGet

Resources