Solving the image path issue in a Vue Component using webpack (inside Vuepress)

Question

Solving the image path issue in a Vue Component using webpack (inside Vuepress)

Incorporating the most recent Vuepress version (1.0.0-alpha.46), I have set up the documentation off the root directory with an assets folder for image storage.

Referencing these images in markdown poses no issues. For example:

![ ](../assets/foobar.jpg)

This works smoothly despite Webpack automatically adding an alias to the image, such as assets/foobar.57589334.jpg. However, complications arise when utilizing a Vue component within Vuepress. In this scenario, I simply insert the following into my markdown file:

this is some markdown
<zoom-image src="../assets/foobar.jpg" />

Now, I receive the raw string without Webpack's postfix inclusion. While one potential solution might involve relocating the image to .vuepress/public, it feels incorrect and could lead to unwanted caching by the service worker. The documentation discusses configuring webpack with aliases, prompting me to attempt defining this in the .vuepress/config.js file:

configureWebpack: {
  resolve: {
    alias: {
      "@images": "assets"
    }
  }
},

Following this adjustment, the markdown appears as:

this is some markdown
<zoom-image src="~@images/foobar.jpg" />

While no errors occur, unsurprisingly, the raw string is once again passed into my component. Exploring options like importing exports from webpack to enforce image name transformation has not yielded success. Can anyone provide assistance?

vue.js webpack vuepress

Answer 1

Answer №1

Hey there! If I understand correctly, my solution would be something like this: the configuration in config.js is:

configureWebpack: {
  resolve: {
    alias: {
      "@assets": path.resolve(__dirname, '../assets')
    }
  }
},

My file structure looks like this:

|-- .vuepress
|   |-- config.js
|-- assets
|   |-- icon.png
|-- guide
|   |-- 1.md
|   |-- 2.md
|   |-- 3.md
|   |-- 4.md

Using the alias like this: ![icon](~@assets/icon.png)

Answer 2

Hey there! If I understand correctly, my solution would be something like this: the configuration in config.js is:

configureWebpack: {
  resolve: {
    alias: {
      "@assets": path.resolve(__dirname, '../assets')
    }
  }
},

My file structure looks like this:

|-- .vuepress
|   |-- config.js
|-- assets
|   |-- icon.png
|-- guide
|   |-- 1.md
|   |-- 2.md
|   |-- 3.md
|   |-- 4.md

Using the alias like this: ![icon](~@assets/icon.png)

Answer 3

Answer №2

If you're having trouble getting it to work using configureWebpack, consider trying the chainWebpack approach instead.

const path = require("path"); // Remember this

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('@assets', path.resolve(__dirname, "../assets"))
  }
}

This is how my structure looks:

|-- .vuepress
|   |-- config.js
|-- assets
|   |-- foobar.jpg

You can create an alias like

![My foobar](~@assets/foobar.jpg)

Answer 4

If you're having trouble getting it to work using configureWebpack, consider trying the chainWebpack approach instead.

const path = require("path"); // Remember this

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('@assets', path.resolve(__dirname, "../assets"))
  }
}

This is how my structure looks:

|-- .vuepress
|   |-- config.js
|-- assets
|   |-- foobar.jpg

You can create an alias like

![My foobar](~@assets/foobar.jpg)

Solving the image path issue in a Vue Component using webpack (inside Vuepress)

Answer №1

Answer №2

Similar questions

Why doesn't the Vuex store update the data property of Vue components?

What is the best way to implement date range filtering in vue js?

Preventing FOUC when navigating away from a vue-flickity carousel/slider - the ultimate guide!

Utilize the clearChart() function within Google charts in conjunction with vue-google-charts

Generate random floating numbers at intervals and calculate their sum

Encountered an issue with locating the module 'webpack-cli/bin/config-yargs' while attempting to run webpack-dev

Integration Between AppEngine and GitHub

Creating dynamic VueFire references is a powerful feature that allows for more flexibility and customization

Problem with JWT authentication causing SockJS handshake to block WebSocket connection attempts

The loading spinner in the UI of Nuxt 3 app is not appearing correctly

Issue with Full-Calendar Vue refetching events; no visible changes occur

Despite being present in the node_modules folder, the ag-grid-vue module appears to be missing

Using boolean .env variables in combination with v-if conditionals

How can you effectively blend Vue/Angular with other JavaScript resources to enhance your development process?

Looking to access XML file data using Vue.js on the server side?

A step-by-step guide on how to capture user input in Vue.js after the "

What causes elements to transition in from the top-left corner when using TransitionGroup in Vue 3?

The content of the string is not appearing

Could an average user potentially access a hidden button meant only for management by examining a website and discovering how to activate it?

Connect a VueJS dynamic component to listen for events emitted from its child component