Images in production do not load.

[MaickDavila]

Hello, I would love to know what I am failing or what I need to configure, when I do the Build, the images do not load on the page.
Thank you very much for the Template, it is excellent.

[userquin]

@MaickDavila La próxima vez escribe en inglés para que otras personas lo puedan entender sin tener que saber Español (en el peor de los casos, vas a Google Translate y pegas la traducción tal cual, y así te entenderemos todos).

¿Has incluido tus propias imágenes o son las de la plantilla? ¿En que entorno estás probando, en local o en un servidor?

[MaickDavila]

in development mode everything is fine, but when testing the page for example in Netlify they do not load the images.

I have a "Media" folder where I put my images, and in the components I call them like this: "~ / media / images / carrousel / banner1.jpg".

[userquin]

@MaickDavila try test with pnpm run build && pnpm run serve on local: can you share the url, I can take a look?

[MaickDavila]

the test link is this https://epic-albattani-99e483.netlify.app/

[MaickDavila]

This is what I'm calling it, am I doing something wrong?

[userquin]

@MaickDavila move the media directory to src/assets directory. If those images won't change or if using PWA just move media directory to your public directory (in that case just use /media/images/insignia.png on the src on previous example and remove the import).

See this entry https://vitejs.dev/guide/assets.html#importing-asset-as-url: the url for those assets will be prefixed with /assets on production so all those images should be under src/assets directory.

On your url there is a lot of assets that do not exist, just see the network tab on dev tools.

[userquin]

@MaickDavila Have you test the build with the local preview? It shouldn't work...

[MaickDavila]

@userquin When doing build, it does not compile the asset images.

[userquin]

@MaickDavila what's the solution you apply, moving to assets directory or to public directory?

Once the build finish, you can see the build on dist folder.

[userquin]

@MaickDavila is the repo public?

[MaickDavila]

@userquin to the assets folder

[userquin]

@MaickDavila can you share you vite.config.ts file?. Can you check the dist folder have the assets directory with all js and css files and also the images directory?

[MaickDavila]

@userquin I did not modify this file
`
import path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
import Layouts from 'vite-plugin-vue-layouts'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Markdown from 'vite-plugin-md'
import WindiCSS from 'vite-plugin-windicss'
import { VitePWA } from 'vite-plugin-pwa'
import VueI18n from '@intlify/vite-plugin-vue-i18n'
import Prism from 'markdown-it-prism'
import LinkAttributes from 'markdown-it-link-attributes'

const markdownWrapperClasses = 'prose prose-sm m-auto text-left'

export default defineConfig({
resolve: {
alias: {
'~/': ${path.resolve(__dirname, 'src')}/,
},
},
plugins: [
Vue({
include: [/.vue$/, /.md$/],
}),

// https://github.com/hannoeru/vite-plugin-pages
Pages({
  extensions: ['vue', 'md'],
}),

// https://github.com/JohnCampionJr/vite-plugin-vue-layouts
Layouts(),

// https://github.com/antfu/unplugin-auto-import
AutoImport({
  imports: [
    'vue',
    'vue-router',
    'vue-i18n',
    '@vueuse/head',
    '@vueuse/core',
  ],
  dts: true,
}),

// https://github.com/antfu/unplugin-vue-components
Components({
  // allow auto load markdown components under `./src/components/`
  extensions: ['vue', 'md'],

  dts: true,

  // allow auto import and register components used in markdown
  include: [/\.vue$/, /\.vue\?vue/, /\.md$/],

  // custom resolvers
  resolvers: [
    // auto import icons
    // https://github.com/antfu/unplugin-icons
    IconsResolver({
      componentPrefix: '',
      // enabledCollections: ['carbon']
    }),
  ],
}),

// https://github.com/antfu/unplugin-icons
Icons(),

// https://github.com/antfu/vite-plugin-windicss
WindiCSS({
  safelist: markdownWrapperClasses,
}),

// https://github.com/antfu/vite-plugin-md
// Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
Markdown({
  wrapperClasses: markdownWrapperClasses,
  headEnabled: true,
  markdownItSetup(md) {
    // https://prismjs.com/
    md.use(Prism)
    md.use(LinkAttributes, {
      pattern: /^https?:\/\//,
      attrs: {
        target: '_blank',
        rel: 'noopener',
      },
    })
  },
}),

// https://github.com/antfu/vite-plugin-pwa
VitePWA({
  registerType: 'autoUpdate',
  includeAssets: ['favicon.svg', 'robots.txt', 'safari-pinned-tab.svg'],
  manifest: {
    name: 'Vitesse',
    short_name: 'Vitesse',
    theme_color: '#ffffff',
    icons: [
      {
        src: '/pwa-192x192.png',
        sizes: '192x192',
        type: 'image/png',
      },
      {
        src: '/pwa-512x512.png',
        sizes: '512x512',
        type: 'image/png',
      },
      {
        src: '/pwa-512x512.png',
        sizes: '512x512',
        type: 'image/png',
        purpose: 'any maskable',
      },
    ],
  },
}),

// https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
VueI18n({
  runtimeOnly: true,
  compositionOnly: true,
  include: [path.resolve(__dirname, 'locales/**')],
}),

],

server: {
fs: {
strict: true,
},
},

// https://github.com/antfu/vite-ssg
ssgOptions: {
script: 'async',
formatting: 'minify',
},

optimizeDeps: {
include: [
'vue',
'vue-router',
'@vueuse/core',
],
exclude: [
'vue-demi',
],
},
})

`

[userquin]

@MaickDavila What about the dist folder.

[userquin]

@MaickDavila move assets outside src folder, sorry.

[userquin]

@MaickDavila you can see the assets folder with the assets/favicon.svg on left, the import on the middle (see imports), and on the browser you can see the image loaded. You can also see the dist/assets/favicon.0093ee8d.svg image for assets/favicon.svg. on left image.