Optimized Images for Nuxt

Related tags

image
Overview
Issues
  • feat: add storyblok provider

    feat: add storyblok provider

    Storyblok provider based on storyblok image service documentation

    https://www.storyblok.com/docs/image-service

    Added storyblok provider Added documentation

    opened by f3ltron 13
  • Use nuxt/image with dynamic url

    Use nuxt/image with dynamic url

    Hi and thanks for developing such an amazing module

    I use NUXT/image with dynamic URLs that come with API requests. In dev mode, there is no problem and URL generate with IPX (and serve locally) but when I build my project the image src doesn't change

    How can I use the IPX Image generator with dynamic images in this module?

    bug 
    opened by ms-fadaei 13
  • Image URL in srcset not set correctly

    Image URL in srcset not set correctly

    I am using nuxt-img in a project with deployment target "static", images are pulled from a Content Management System and not locally hosted. I do not specify a provider or define any other options in nuxt.config.js.

    When running nuxt generate everything seems to be working as intended and the build logs output ✔ Generated static image dist/_nuxt/image/{HASHED-FILENAME}.jpg for every image. But when I inspect the DOM, the created <picture>-Elements contain a lot of <source>-Elements with the initial image URL instead of the freshly generated one.

    bug 
    opened by thmsnhl 12
  • Nuxt Generate does not produce images

    Nuxt Generate does not produce images

    Nuxt version: 2.15.3 @nuxt/image version: 0.4.4 target: 'static'

    I have been using the module in dev mode with no problems. However, when trying to generate a static site using nuxt generate no images are produced by @nuxt/image and all images on the site 404. The generated image URLs point to _ipx/IMAGE_PATH but this is not in the dist folder of the Nuxt project.

    I have tried with a fresh Nuxt project with only @nuxt/image added and get exactly the same issue. Running nuxt generate produces no errors in the CLI and the site builds without a problem. The images are just not generated.

    Any help on this would be greatly appreciated.

    bug needs reproduction 
    opened by dannyalder88 12
  • Using nuxt/image with nuxt/content

    Using nuxt/image with nuxt/content

    Anyone having issues using this with the nuxt/content module?

    It's fine in dev, but as soon as I generate or push to Vercel the images break. They're not being generated, and the source isn't updating.

    opened by tusamni 10
  • Dev

    Dev

    • Simplify NuxtImage functionality. Remove the placeholder and lazy feature.
    • Remove unnecessary tags and only render image tag
    • Rename responsive prop to layout (fix #86)
    • Introduce quality prop
    • rename nuxt-image to nuxt-img (fix #85)
    • rename ipx to local (close #83)
    • clean up double slashes outside of provider runtime
    • handle the router base (fix #97)
    • support NUXT_IMAGE_PROVIDER environment variable (close #84)
    • allow top-level providers config (fix #81) official providers config can be defined at top-level of image config and custom providers should define under providers property
    • refactor nuxt-picture (fix #92)
    • disable blur filter on custom placeholder (fix #88)
    • merge presets with inline modifiers (fix #93)
    • support assets using the remote adapter (fix #73)
    • introduce provider and preset props
    • support GIF files and data URLs (fix #102)

    close #80 close #82

    opened by farnabaz 9
  • Lazy loading doesn't work on static site

    Lazy loading doesn't work on static site

    Lazy loading works on the development server, but not on the static site that is generated. I am using dynamically generated images.

    bug needs reproduction 
    opened by 684efs3 8
  • fit property

    fit property

    <nuxt-image fit="contain"....

    It seems the fit property is always set to 'cover' no matter what it is defined

    opened by dloused 8
  • Document the use of the dir option to define source image location

    Document the use of the dir option to define source image location

    This is a minor issue but I'm wondering whether its possible to keep images in say assets/images rather than static/images and be able to use them with with these components?

    The reason I ask is everything in static gets put in dist and deployed, so my original high resolution source images will end up getting uploaded each time and being publicly available (if the url is known). This increases deployment size and time as source images are generally a few megabytes each. Ideally only the derivative generated images would end up in dist

    documentation 
    opened by tanc 8
  • ipx server on 0.2.x

    ipx server on 0.2.x

    The new alphas aren't spinning up an ipx server or generating any images from local dirs. Are changes to nuxt.config necessary to enable this (vs v0.0.4) or is one supposed to host ipx somewhere else? I'm using the stock prefs:

    image: {
            static: {
                clearCache: false,
                cacheDir: "~~/node_modules/.cache/nuxt-img",
                dir: "~/assets/uploads",
                sharp: {}
            }
    }
    
    opened by pkpowell 7
  • SFCs with scoped CSS don't style img/source in <nuxt-picture>

    SFCs with scoped CSS don't style img/source in

    Hi, I'm currently migrating to nuxt-image and I found a small problem with scoped CSS. Not a big one, I just removed scoped and "scoped" it with a class (see here). It would be nice if I still could use scoped. I'm not even sure if that's something nuxt-image can fix. Might be linked to https://github.com/nuxt/image/issues/288.

    Steps to reproduce

    <nuxt-picture
          class="image"
          :src="post.image"
          :alt="post.alt"
          sizes="xs:200px md:500px lg:1024"
    />
    
    <style lang="sass" scoped>
      .image
        margin: 0 0 2rem 0
        width: 100%
        display: block
        source, img
          border-radius: $border-radius
          width: 100%
          min-height: 16rem
    </style>
    

    Expected result

    <source> & <img> are styled when <style lang="sass" scoped> is used.

    Actual result

    <source> & <img> are not styled when <style lang="sass" scoped> is used.

    Thanks a lot for this nice package <3

    enhancement 
    opened by LukaHarambasic 0
  • ImageKit transformations as path parameter instead of query parameter

    ImageKit transformations as path parameter instead of query parameter

    Hi there!

    I have some ImageKit images that already include a query string: https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg?v=1623268222

    When I apply the sizes prop, a new query string is appended to the URL rather than separating it as an additional query parameter: https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg?v=1623268222?tr=w-400

    According to ImageKit, transformations can be added in the URL as either path parameter or query parameter.

    Is this an option supported in the ImageKit provider?

    If not, is there any way to modify the url through the config, without having to write a custom provider?

    Thanks!

    opened by dvns 0
  • CSS class on <nuxt-picture> is appended to <picture> and not <img>

    CSS class on is appended to and not

    CSS classes on <nuxt-picture> goes to HTML element <picture>, however, it should go to <img> element. Current solution pretty much blocks devs from using utility classes/frameworks.

    Example

    Code

    <nuxt-picture
    	:src="post.featured_media"
    	width="600"
    	height="300"
    	class="w-100 br-8"
    />
    

    Actual result

    <picture class="w-100 br-8">
    	<source type="image/webp" srcset="...">
    	<img src="....">
    </picture>
    

    Expected result

    <picture>
    	<source type="image/webp" srcset="...">
    	<img src="...." class="w-100 br-8">
    </picture>
    
    opened by lucien144 4
  • docs: add additional imgix documentation and modifiers

    docs: add additional imgix documentation and modifiers

    Added a complete list of imgix modifiers, mapped to the KeyMap, as well as improving documentation to include examples and best practices

    opened by daletom 1
  • Enforce usage of `alt` text

    Enforce usage of `alt` text

    Bug

    The current way the plugin is designed allows to render an img tag without an alt attribute. This is contradictory to the claim that the plugin is «standards compliant» as the alt tag is mandatory. Currently, the output of the plugin in the docs does not pass the HTML validator. I copied the output to a demo page: https://validator.w3.org/nu/?doc=https%3A%2F%2Fplayground.owlish.dev%2Fnuxt-img%2F

    Broader Picture

    The WebAIM Million report year after year concludes that missing alternative text is one of the most prevalent errors making the internet hard to impossible to use for humans with disabilities. Unfortunately, it also concludes that pages including Vue correlate with a whopping 31% increase in detected errors.

    As the world wide web should be usable by everyone enforcing best practices and educate how to meet them should be part and parcel of every framework and plugin. nuxt/image currently fails to do so.

    Solution

    Add altText as a required prop, and show a meaningful error in the console if no alternative text is provided. The message could, as an example, link to the Images Concepts tutorial of the Web Accessibility Initiative. The plugin should render no output, unless alternative text (an empty string for decorative images) is provided. While this steps seems drastic, it’s the only way to truly be standards compliant (and a step taken by eleventy/img already). Further, the documentation should be updated to include meaningful alt text, so that copy & pasting does not lead to broken code.

    enhancement 
    opened by ovlb 2
  • chore(deps): update all non-major dependencies

    chore(deps): update all non-major dependencies

    WhiteSource Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @nuxt/image | ^0.4.13 -> ^0.4.14 | age | adoption | passing | confidence | | nuxt | ^2.15.6 -> ^2.15.7 | age | adoption | passing | confidence |


    Release Notes

    nuxt/image

    v0.4.14

    Compare Source

    nuxt/nuxt.js

    v2.15.7

    Compare Source

    🔰 Security advisory

    Please upgrade to [email protected]^2.15.7 if using [email protected] or [email protected]

    🐛 Bug Fixes
    • vue-app
      • #​9431 Check whether a route exists within the nuxt app before replacing

    Configuration

    📅 Schedule: At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.


    • [ ] If you want to rebase/retry this PR, check this box.

    This PR has been generated by WhiteSource Renovate. View repository job log here.

    opened by renovate[bot] 1
  • Support `<picture>` with multiple sources

    Support `` with multiple sources

    It seems the picture tag implementation in the nuxt/image package is lacking basic picture tag features.

    The picture tag and its sources (who act like regular images - with srcset and sizes, but with the addition of the "media" attribute) is meant to be able to show a different image for different matches in that media attribute.

    Currently one source is added in the code which acts as a normal image tag with srcset and sizes. However, there is no mention of the media attribute in the implementation. see: https://github.com/nuxt/image/blob/main/src/runtime/components/nuxt-picture.vue

    A picture tag is mainly used in a more "Art Direction" way and not “Resolution Switching”.

    <picture> is capable of handling resolution switching, however you shouldn’t use it if that’s all you need. In such cases stick with a regular element plus srcset and sizes.

    Example of average picture tag usage:

    1. On landscape devices I show an image in a 22:9 aspect ratio and a specific crop.
    2. On portrait devices I show an image in 1:1 ratio and with a crop on the face.

    These two images are different. Not just their width/height, they are actually different files with different aspects ratios and compositions. Each one is a source in the picture tag. Each of these <source /> tags also has a srcset and a sizes attribute so they behave like a normal image nuxt image would. They have an additional media attribute which defines when they are shown. This field has a media query in it that tells the browser in which context to show the source.

    An HTML example:

    <picture>
        <source
            media="(orientation: landscape)"
            srcset="image-small.png 320w,
                    image-medium.png 800w,
                    image-large.png 1200w"
            sizes="(min-width: 60rem) 80vw,
                   (min-width: 40rem) 90vw,
                   100vw">
        <source
            media="(orientation: portrait)"
            srcset="image-small-portrait.png 160w,
                    image-medium-portrait.png 400w,
                    image-large-portrait.png 600w"
            sizes="(min-width: 60rem) 80vw,
                   (min-width: 40rem) 90vw,
                   100vw">
        <img src="image-small.png" alt="Image description">
    </picture>
    

    You can of course also use the picture tag for file type support etc

    <picture>
      <source type="image/webp" srcset="illustration.webp">
      <img src="illustration.png" alt="A hand-made illustration">
    </picture>
    

    With the above in mind we should be able to add multiple images into the nuxt picture tag so sources can be generated with media attributes.

    See image for differences: img-picture

    enhancement 
    opened by timbenniks 5
  • ERROR: Request path contains unescaped characters

    ERROR: Request path contains unescaped characters

    Edit:

    Use encodeURI will solve this issue.

    image

    ========

    Hi,

    Thanks for building this module!

    I encountered this issue while testing on my site:

     ERROR  Request path contains unescaped characters 
    
      at new ClientRequest (_http_client.js:148:13)
      at request (https.js:314:10)
      at node_modules/node-fetch/lib/index.js:1438:17
      at new Promise (<anonymous>)
      at Object.fetch [as default] (node_modules/node-fetch/lib/index.js:1407:10)
      at Object.http (node_modules/ipx/dist/index.js:91:53)
      at node_modules/ipx/dist/index.js:370:33
      at Object.src (node_modules/ipx/dist/index.js:42:25)
      at handleRequest (node_modules/ipx/dist/index.js:429:25)
      at IPXMiddleware (node_modules/ipx/dist/index.js:456:5)
      at call (node_modules/connect/index.js:239:7)
      at next (node_modules/connect/index.js:183:5)
      at next (node_modules/connect/index.js:161:14)
      at next (node_modules/connect/index.js:161:14)
      at WebpackBundler.middleware (node_modules/@nuxt/webpack/dist/webpack.js:2194:5)
    

    This happens when the remote URL contains non-alphanumeric characters (in my case there are Chinese characters in the filenames). But I am not able to rename the remote image filenames. Is there any workaround for this? Thanks!

    bug 
    opened by ateliershen 2
  • Doesn't cache dynamically loaded images.

    Doesn't cache dynamically loaded images.

    I'm using Strapi for my backend and wanted to try out Nuxt images for static caching (So I can turn off my backend), but the problem is that it doesn't work when displaying images dynamically.

    All my image links are pre-fetched on pageload but only the main one is displayed. That one gets cached but the subsequent images (dynamically loaded) are still pointing to my API.

    Is there a way to pre-save all these images?

    Screenshots of the main image and the dynamically loaded one: http://snpy.in/IbBv8J http://snpy.in/l9wt3r

    Original code behind the image:

    <div class="previewImg">
      <nuxt-img
        v-bind:src="strapiUrl + selectedMetal.Attels.url"
        v-bind:alt="selectedMetal.Attels.alternativeText"
        class="metalImg"
      />
    </div>
    
    needs reproduction 
    opened by HenrijsS 2
  • [feature request] add a way to pass custom style to picture img

    [feature request] add a way to pass custom style to picture img

    Hi, is it possible to add a way to pass style to nuxt-picture img node ?

    enhancement 
    opened by flapili 1
Owner
Nuxt
The Intuitive Vue Framework
Nuxt
Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

mirari 1.6k Jun 10, 2021
🎨 A vue directive for the cosha library

vue-cosha Vue cosha is a simple port of the cosha library for ease of use in Vue projects. "Colorful shadows for your images. ?? " cosha lets you add

Josh King 70 May 18, 2021
A lightbox inspired Vue.js component.

A second version of the lightweight lightbox inspired component for Vue.js with local video support and more features coming. If you're interested, see demo.

Martin Rocek 223 Jun 6, 2021
🙊 live2d anime figure Vuejs component.

qiokian - anime in Vue.js! ?? live2d anime figure Vuejs component. ?? Demo Link qiokian qiokian landing page ?? Project setup ?? Install dependencies

null 15 Apr 21, 2021
An Mobile-First image viewer for Vue2 / 一个移动端优先的 Vue2 图片预览插件

img-vuer An Mobile-First image viewer for Vue2 中文 README ??‍♀️ Easy to use ?? Swipe gesture ?? Zoom gesture V0.11.0 Now you can use thumbnail~ V0.13.0

DJJo 244 May 2, 2021
🙋‍♀️ Image magic animation drawing effect component for Vue 2.x | 图像动态绘制效果

vue-image-painter English | 简体中文 ?? Example Demo Demo Source Code ?? QuickStart Install yarn add vue-image-painter # OR npm i -S vue-image-painter Imp

Komo 19 May 30, 2021
Vue progressive image loader plugin like Medium

vue-image-loader Vue progressive image loading plugin Article here : https://www.kevindesousa.me/vue-image-loader/ Installation $ npm install @kevinde

Kevin De Sousa 53 Mar 6, 2021
Image comparison slider. Compare images before and after. Supports React, Vue, Angular.

Image comparison slider. Compare images before and after. Supports React, Vue, Angular.

Dmitry Snisarenko 65 Jun 5, 2021
A native Vue.js lightbox component

vlightbox Simple native Vue.js lightbox

Oliver Taylor 34 May 20, 2020
Vue image placeholder directive for broken images.

Vue Image Fallback v-img-fallback Vue image placeholder directive for broken images. If you like this project, please give it a star, and consider fol

Joff Tiquez 43 Mar 29, 2020
Imagvue is an image component for Vue.js

Imagvue Imagvue provides basic image processing props(size,blur,contrast,grayscale, etc.). Support image lazy loading. All Attributes can bind with da

Willy Hong 268 Jan 24, 2021
Vue-cool-lightbox is a pretty Vue.js lightbox component, inspired by fancybox with zoom, swipe, captions and videos supported

Vue-cool-lightbox is a pretty Vue.js lightbox component, inspired by fancybox with zoom, swipe, captions and videos supported.

Lucas Pulliese 220 Jun 3, 2021
A Vue component for showing loader during image loading https://john015.github.io/vue-load-image/

English | 한국어 Vue-load-image Vue-load-image is 1KB(gzipped size) minimalist Vue component that display loader during image loading and display alterna

Sangwon Lee 51 May 17, 2021