Alias not working with IPX

[modbender]

Alias is not working with default provider IPX

Reproduction: https://stackblitz.com/edit/github-kmj5sa?file=nuxt.config.ts

I did a npm run generate i.e. nuxi generate. The image generated still contains the domain.

Below is the settings:

  image: {
    domains: ['images.pexels.com'],
    alias: {
      backend: 'https://images.pexels.com',
    },
  },

and image generated

https://githubkmj5sa-smd0--3000--1f9496ab.local-credentialless.webcontainer.io/_ipx/f_webp/https://images.pexels.com/photos/38292/walnut-nut-fruit-bowl-healthy-38292.jpeg

I thought maybe alias just doesn't work with IPX but in the IPX provider code I see https://github.com/nuxt/image/blob/58c5139106ed1552a98d318b5ca281e298c36180/src/runtime/providers/ipx.ts#L38 which makes me think IPX does support alias.

[pi0]

Thanks for reporting issue with nice repro!

Yes, IPX supports aliases and also in your reproduction if you open /_ipx/w_200/backend/photos/38292/walnut-nut-fruit-bowl-healthy-38292.jpeg it works correctly meaning image module also correctly sets the IPX configuration.

It seems an issue with image module core that does not "shortens URLs" with aliases when supportsAlias flag exists for "generating URLs" (a similar feature that image module did provided in past to keep URLs in HTML shorter)

---

Alternatively and as a workaround, you can avoid adding full URL in the src prop of NuxtImg like this:

<template>
  <div>
    <NuxtImg
      format="webp"
      width="200"
      src="/backend/photos/38292/walnut-nut-fruit-bowl-healthy-38292.jpeg"
    />
  </div>
</template>

And generated URL remains short like this: /_ipx/w_400&f_webp/backend/photos/38292/walnut-nut-fruit-bowl-healthy-38292.jpeg

[modbender]

Thank you! About the workaround, in my actual private project, the image link is provided by CMS so I think it would more pain to do modifications to it all over my Nuxt project.

But it's fine, I'm sure the workaround will help someone out there having the same problem. I'll wait for the fix.

[modbender]

Also to add to the issue, I think the link /_ipx/f_webp/https://images.pexels.com/photos/38292/walnut-nut-fruit-bowl-healthy-38292.jpeg that contains the URL from alias should be blocked. Because, if not then,

1. It would contradict the usage of alias, by allowing a back door to the non-aliased version anyway.
2. Redundant to keep 2 paths for the same exact image.

[alederzz]

Same problem here. I use IPX and have set up an alias and it doesn't seem to work.

image: {
    domains: ['img.example.com'],
    alias: {
      lp: 'https://img.example.com'
    }
},

output:

<source type="image/webp"
  sizes="(max-width: 640px) 320px, (max-width: 768px) 640px, (max-width: 1024px) 768px, (max-width: 1280px) 1024px, (max-width: 1536px) 1280px, 1536px"
  srcset="/_ipx/f_webp&amp;s_320x215/https://img.example.com/wp-content/uploads/2023/10/fancy-slug-image.png 320w, /_ipx/f_webp&amp;s_640x431/https://img.example.com/wp-content/uploads/2023/10/fancy-slug-image.png 640w, /_ipx/f_webp&amp;s_768x517/https://img.example.com/wp-content/uploads/2023/10/fancy-slug-image.png 768w, /_ipx/f_webp&amp;s_1024x689/https://img.example.com/wp-content/uploads/2023/10/fancy-slug-image.png 1024w, /_ipx/f_webp&amp;s_1280x862/https://img.example.com/wp-content/uploads/2023/10/fancy-slug-image.png 1280w, /_ipx/f_webp&amp;s_1536x1034/https://img.example.com/wp-content/uploads/2023/10/fancy-slug-image.png 1536w, /_ipx/f_webp&amp;s_2048x1378/https://img.example.com/wp-content/uploads/2023/10/fancy-slug-image.png 2048w, /_ipx/f_webp&amp;s_2560x1724/https://img.example.com/wp-content/uploads/2023/10/fancy-slug-image.png 2560w, /_ipx/f_webp&amp;s_3072x2068/https://img.example.com/wp-content/uploads/2023/10/fancy-slug-image.png 3072w">

[hmingv]

This problem has been around for a long time, are there any other solutions?

also, I expect to save the remote image to local, and then should use the local address, but I will get the following error:NuxtImg

[17:16:06] ERROR ENOENT: no such file or directory, mkdir 'D:\Files\Projects\Develop\master.output\public_ipx_\https:\thirdwx.qlogo.cn\mmopen \vi_32\zWJZmOAvkg10EoiBLEJw06XwwmQboRfEw07MiaJlYc2SevVOmNnpEibVPIVSqqXOBNGt6wc4UDZ0ibpzoJG2RKibQ6Q'

Is this the same reason?

[barayuda]

same as @hmingv I got this error when using version 1.7.0 might be there any solutions or best practice when use external image link and build the project with SSG mode?

thanks in advance

[hmingv]

I implemented the function of converting the domain name in the externally provided image address into an alias through a custom component. It may not be the optimal solution, but it is enough for me at present. I hope the official new version can solve it in a better way.

There is no difference in usage: <EsImg loading="lazy" alt="Logo" :src="logo" />

[Hoko2021]

I ran into this issue and after tedious debugging and realisation. The correct way to make this work, is to provide alias in the src of the image. I thought from the documentation that you would just provide the alias in the config and it would the domain. When in fact this is not the case. The config is correct, but you need to perform it like this, for example:

<nuxt-img src="backend/photos/38292/walnut-nut-fruit-bowl-healthy-38292.jpeg" />

So you would need to replace https://images.pexels.com with backend for IPX to reference back to the domain you've provided. Hope this helps