Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Metronic 8 demo 1 medias


I'm using metronic 8 demo 1 with vue3. I see that to show images it uses this function

getAssetPath("media/misc/auth-screens.png")
.

QUESTION: Where should I add new images/logos? I mean where to place that root folder (media)?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (8)


Hi,

Thank you for reaching out to us.

You can put your images/logos in public/media folder. Then you can refer your files the same way with getAssetPath("media/my-image.png").

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi,

Thanks for the reply.

Yes, I did that, but when I build the project (npm run build -> vite build) the image URLs start with "build", like this: /build/media/logo.webp, which is wrong, it should be without a "build".

Can you help me to know how to build images?
Maybe need to change vite.config.js to copy images to that path?

Thanks in advance,
Vahan



Hi,

Did you modify the base property in vite.config.js?

By default, our previews are served under /metronic8/vue/demo1/, and setting base property adds the relative path for all assets referred with getAssetPath when you deploy Metronic on your server, you should update base property up to the path on your server. If you do not have a nested folder on your server then you can set base path to /.

You can read more about this property in the official documentation: https://vitejs.dev/guide/build#public-base-path.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi, thanks for the reply.

When added base=/ this param to build then images starting to show up correctly, but in this case I can't see icons, they are broken, square icons just showing there.

Just FYI, when using this npm run dev then images and icons works perfect, I didn't added or specified any param for dev.

Please help to fix it.
Thank you!!



Hi,

Apart from changing the application's base path, did you make any other modifications?

We tested this in the latest Metronic version, and with the correct base path configuration, both images and icons are displayed correctly.

Additionally, please ensure that you are loading our main icon set styles by including the following imports:

@import "assets/keenicons/duotone/style.css";
@import "assets/keenicons/outline/style.css";
@import "assets/keenicons/solid/style.css";


Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi,

Thanks for the reply.
I figured out some things, so right now my only issue is that when building the project and setting images like this

getAssetPath("media/logos/icon.png")

then in the built content it is replaced with

/build/media/logos/logo.png

but it should be without the build part, it should be like this:

/media/logos/logo.png


How can I remove the build prefix from images URLs?

Thanks in advance,
Vahan



Just FYI, I have this in my package.json:

{
...
"scripts": {
"dev": "vite",
"build": "vite build"
},
...
}

and when using npm run dev then and images and icons showing correctly.



Hi,

As you can see in our preview, all images use the base path /metronic8/vue/demo1/. This base path is configured in the vite.config.js file. Please ensure that your path is set up correctly.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(