Tag: solved

Categories
Blog Javascript Learning

Solution: TypeError: Failed to construct ‘URL’: Invalid URL

Hello,

If you are facing error :


Unhandled Runtime Error
TypeError: Failed to construct 'URL': Invalid URL
Failed to construct ‘URL’ : Invalid URL in your nextjs app

And you already have following loader ‘imgix’ settings in your next.config.js file

images: {
    // loader and path setting for android build to load nextjsimage and also on web on certain scenarios!
    loader: 'imgix',
    path: '/', // Remove the path prefix for production images
    domains: [
      'xxx.com',
      '*.xxx.com',
      'aaa.xxx.com',
      'via.placeholder.com',
    ],
}

To fix this the solution provided here worked out well!

Code snippet solution: source page stackoverflow

const loaderProp =({ src }) => {
    return src;
}

<Image
      src={currentImage.imageurl}
      alt={currentImage.imageurl} 
      layout="fill"
      className={styles.imageSize} 
      loader={loaderProp}
/>

we just need to add loader prop to the Image tag of next.js component and passdown the callback function which resolves the error above, voila!

Hope this also help you if you are facing this solution in your next.js application.

happy learning!

Categories
Learning Learning Tech

How to build Android APK/apk from command line interface on windows/mac?

Hello,

If you are looking for, to build or generate the android apk file (in your capacitor project) directly from the command line rather then opening Android Studio and building up.

I will share few steps and challenges face to build android apk from CLI on windows and also would share below the mac version of command line code too incase you are mac user.

First step first,

Before running the CLI command which I will be sharing below, we make sure we add the two things under Environment variables of windows system.

  • Java JDK or JAVA_HOME path
  • zipalign if not set or when you run command your cli throw error not zipalign command (so we need it too in the PATH variable of the windows system)
See last two entries in the image above, second entry were zipalign.exe is available under your real Android Studio folder.

Next, just try out these command you will be good to go

Windows CLI command for Android APK release build
cd android && 
gradlew.bat assembleRelease && 
cd app/build/outputs/apk/release &&
jarsigner -keystore YOUR_KEYSTORE_PATH -storepass YOUR_KEYSTORE_PASS app-release-unsigned.apk YOUR_KEYSTORE_ALIAS &&
zipalign 4 app-release-unsigned.apk app-release.apk

In Code above, note we are using gradlew.bat which is important to note for window users reset is same for MAC command too (didn’t tested on mac, channel of command source from the post), result would working for me on windows!

Note the date and time of output (compare to post date and time, I renamed the file to mdw-app-release.apk for use)
Mac CLI command for Android APK release build
cd android && 
./gradlew assembleRelease && 
cd app/build/outputs/apk/release &&
jarsigner -keystore YOUR_KEYSTORE_PATH -storepass YOUR_KEYSTORE_PASS app-release-unsigned.apk YOUR_KEYSTORE_ALIAS &&
zipalign 4 app-release-unsigned.apk app-release.apk

If you like to generate for debug just changed assembleRelease to assembleDebug and change the file names accordingly, from release to debug or whatever names you would like to prefix or suffix.

Hope this gives ideas and info for the challenge you might facing.

Happy Learning & Thanks for visit.

Categories
Javascript Learning Tech

How to fix nextjs appending http://localhost:3000/_next/image? to the image srcset how to remove for production build for images?

Hello,

Welcome to the question and for the search, facing this issue? lets quickly see how we can fix this, with and in next.config.js file.

In Next.js, when using the next/image component, the src attribute is automatically transformed to a URL that goes through the Next.js image optimization pipeline. During development, this URL may include http://localhost:3000/_next/image? to indicate the local development server.

However, for production images, you can configure Next.js to remove the http://localhost:3000/_next/image? prefix. Here’s how you can achieve that:

Create a custom loader for Next.js images:

  • Open next.config.js and add the following code:
    • module.exports = {
    • images: {
      • loader: 'imgix',
      • path: '', // Remove the path prefix for production images
    • }, };
  • This configuration sets the loader option to use the imgix loader, which removes the http://localhost:3000/_next/image? prefix. The path option is set to an empty string, this will leave the prefix for image urls and left blank

Now you can easily build your project and test to images are loading fine with absolute url path if applied so.

Hope this help to solve the issue.

Happy Learning!