How can you prevent the url-loader from inlining SVGs that are less than 1kb in size?

Usually, Nuxt utilizes url-loader to encode and embed images smaller than 1kb as base64:

https://nuxtjs.org/docs/2.x/directory-structure/assets/#webpack

The default Nuxt configuration snippet can be found here:

https://github.com/nuxt/nuxt.js/blob/dev/packages/webpack/src/config/base.js#L383

I am looking to turn off this base64 encoding specifically for SVGs.

This is how I include SVGs in my template:

    <img
      :src="require(`@/assets/images/${src}`)"
    />

Below is the approach I tried in my custom Nuxt config:

export default {
  build: {
    extend(config, { isDev }) {
      config.module.rules = [
        {
          test: /\.svg$/i,
          use: [{
            loader: 'url-loader',
            options: {
              limit: false,
              name: '[path][name].[ext]',
            },
          }],
        },
        ...config.module.rules,
      ];
    },
  },
}

As a result, images do not display on my development server:

https://i.sstatic.net/PaVsN.jpg

No build errors are reported. How should I correctly disable the inline embedding of SVGs?

Edit:

Since I did not receive any responses, I resorted to a cumbersome method of iterating through all existing rules and explicitly removing svg from them:

export default {
  build: {
    extend(config, { isDev }) {
      config.module.rules = config.module.rules.map(rule => {
        if (rule.test && rule.test.toString().indexOf('svg') > -1) {
          const regex = rule.test;
          rule.test = new RegExp(regex.source.replace('|svg', ''), regex.flags);
        }
        return rule;
      });

      config.module.rules = [
        {
          test: /\.svg$/i,
          use: [{
            loader: 'url-loader',
            options: {
              limit: false,
              name: '[path][name].[ext]',
            },
          }],
        },
        ...config.module.rules,
      ];
    },
  },
}

Answer №1

This specific configuration in nuxt.config.ts ensures that small assets are not included inline.

// nuxt.config.ts

export default defineNuxtConfig({
  vite: {
    build: {
      assetsInlineLimit: 0, // Setting this to zero stops assets from being inlined
    },
  },
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Invert the output of the callback function by using the not(callback) method

Within my filtering function, I am passing a testing function: var array = [1,3,5,7,9] function bigger(n){return n > 5} function filterArray(data,testfn){ return data.filter(e=> testfn(e))} console.log(filterArray(array,bigger)) >>>[7,9 ...

The XHR XML responseType in its unadulter

Is it feasible to adjust XHR settings in order to receive an HTML document? xhr.responseType = "document"; Upon receiving the response, xhr.responseXML contains an HTML document parsed against the HTML namespace URI. To verify this, you can use: xhr.res ...

Issue encountered: Document not being saved by Mongoose, error message received: "MongoClient connection must be established"

Currently, I am attempting to establish a connection with MongoDb using mongoose. Below is the code snippet that I have implemented for this purpose: controller.js const conn = mongoose.createConnection(db, { useNewUrlParser: true, ...

Enhance Your HTML Table with a Dynamic Multi-select Interactive Filter

I am currently working on generating an HTML table dynamically using JSON objects. My goal is to implement a filter for one of the table columns, which is functioning correctly. However, I'm facing challenges in integrating a multiselect feature. I h ...

Manifest for local messaging host was not detected

I am currently facing an issue with establishing a connection between a chrome-extension and a NativeMessagingHost. While everything works smoothly on Windows, I am encountering difficulties on Linux distributions such as Arch, Kali, or Ubuntu. The specifi ...

Error encountered when deploying mixed content

Currently working on a project and looking to deploy my dev server to firebase hosting. Encountered some Mixed Content errors in Chrome dev tools after deploying the app, indicating that I needed to switch certain source files from http to https. The erro ...

I seem to be facing some difficulty in dynamically calling my buttons in AngularJS

Can you assist me in solving this problem? I am new to Angular and just starting out. Initially, there is only one button on load called "Add list". When the user clicks on this button, they are able to add multiple lists. Each list contains a button labe ...

Tips for aligning text in MUI Breadcrumbs

I am currently utilizing MUI Breadcrumb within my code and I am seeking a solution to center the content within the Breadcrumb. Below is the code snippet that I have attempted: https://i.stack.imgur.com/7zb1H.png <BreadcrumbStyle style={{marginTop:30}} ...

Troubleshooting JavaScript for Sidebar Disappearance due to marginRight and display CSS Issue

I need to adjust the layout of my website so that the sidebar disappears when the window is resized below a certain width, and then reappears when the window is expanded. Here is the HTML code: <style type="text/css"> #sidebar{ width:290 ...

Switching icon with jQuery upon clicking

I'm just starting to learn jQuery and I'm working on changing the font icon class when clicked to display a drop down. Right now, it changes the icon and drops down the content as expected. However, I'm facing an issue where I want the icon ...

the state hooks are failing to update the state when there is a change

Struggling with updating the title of my blog in a simple blog app. The current state is not being updated despite multiple attempts to change the method of setting state. Here's a snippet from App.js: function BlogDetail() { const [blogName, set ...

assign a class to an element as you scroll

Is it possible to add a .class to an element when a user scrolls the page, and then remove it when scrolling stops? Specifically, I would like to apply the font awesome icon class fa-spin only while the page is being scrolled, and have the icon stop spinn ...

Issues encountered when attempting to use @app.route without redirection

I have a function that works perfectly when I redirect to another page with @app.route('/results'), but I'm having trouble making it work on the same page without reloading: @app.route('/') def static_file(): return app.send_s ...

Using jQuery, learn how to successfully call a selector from dynamic content

I am currently facing a challenge with a table that is generated server-side and then appended to the view page (client-side). Since the table is not directly included in the DOM, I am using the StickyTableHeaders jQuery plugin to create a sticky header fo ...

My new tag is not appearing as expected on the website

When the 'ADD TODO' button is pressed and the input field is empty, a paragraph tag should be created below the input field with the text 'enter your TODO'. Despite creating the element in JavaScript, it is not appearing on the webpage. ...

To Default or Not to Default: Dynamic Imports in React Router 3 for Webpack Code-Splitting

Lately, I've been focusing on upgrading my project from webpack 3 (v. 3.3.0) to webpack 4 (v. 4.44.2). Building and compiling went smoothly, but for some reason, nothing was being rendered on the screen. Upon comparing the parameters passed to Router ...

Is there a way for me to determine if something is hidden?

My goal is to have selector B toggle when selector A is clicked or when clicking outside of selector B. This part is working fine. However, I'm struggling with preventing selector B from toggling back unless selector A is specifically clicked - not w ...

The border style color of the Buefy input does not seem to be able

I was attempting to customize the appearance of a b-input element in buefy, but unfortunately my design changes are not being applied. Below is the code I am currently using: <b-field> <b-input placeholder="Username" size="is-medium" ></b- ...

The property for the JQuery keyboard event code is consistently null

Per information from MDN, keyboard events are supposed to have a code property that returns a string constant like "KeyA" if the A key has been pressed. However, in my JQuery keyup event handler, the code property always remains undefined: $(document).on( ...

Showing a notification that is persistent and not dismissible

Hello everyone! I've been struggling with a problem on the RPS project for quite some time now. The issue arises when I try to display a message for a tie in the game, but I can't seem to find a solution to make it disappear when the round is not ...