Estoy buscando la URL correcta para hacer referencia a activos estáticos, como imágenes dentro de Vue javascript.

Por ejemplo, estoy creando un marcador de folleto usando una imagen de icono personalizada, y probé varias URL, pero todas devuelven 404 (Not Found):

Main.vue:

var icon = L.icon({
    iconUrl: './assets/img.png',
    iconSize:     [25, 25],
    iconAnchor:   [12, 12]
});

Intenté poner las imágenes en la carpeta de activos y la carpeta estática sin suerte. ¿Tengo que decirle a vue que cargue esas imágenes de alguna manera?

Para cualquiera que busque referir imágenes desde la plantilla, puede referir imágenes directamente usando '@'

Ejemplo:

<img src="@/assets/images/home.png"/>

En una configuración normal de Vue, /assetsno se sirve.

En cambio, las imágenes se convierten en src="data:image/png;base64,iVBORw0K...YII="cadenas.

Usando desde dentro de JavaScript: require()

Para obtener las imágenes del código JS, use require('../assets.myImage.png'). La ruta debe ser relativa (ver más abajo).

Entonces tu código sería:

var icon = L.icon({
    iconUrl: require('./assets/img.png'),   // was iconUrl: './assets/img.png',
//  iconUrl: require('@/assets/img.png'), // use @ as alternative, depending on the path
    // ...
});

Usar ruta relativa

Por ejemplo, digamos que tiene la siguiente estructura de carpetas:

- src
  +- assets
     - myImage.png
  +- components
     - MyComponent.vue

Si desea hacer referencia a la imagen en MyComponent.vue, la ruta debe ser../assets/myImage.png

Aquí hay un CÓDIGO DE DEMOSTRACIÓN Y UNA CAJA que lo muestra en acción.

Para que Webpack devuelva las rutas de activos correctas, debe usar require ('./relativa / ruta / a / archivo.jpg'), que será procesado por el cargador de archivos y devuelve la URL resuelta.

computed: {
  iconUrl () {
    return require('./assets/img.png')
    // The path could be '../assets/img.png', etc., which depends on where your vue file is
  }
}

Consulte las plantillas de VueJS: manejo de activos estáticos

Una mejor solución sería

Agregando algunas buenas prácticas y seguridad a la respuesta de @ acdcjunior, para usar en @lugar de./

En JavaScript

require("@/assets/images/user-img-placeholder.png")

En plantilla JSX

<img src="@/assets/images/user-img-placeholder.png"/>

usando @apunta al srcdirectorio.

utilizando ~puntos a la raíz del proyecto, lo que facilita el acceso a los node_modulesrecursos de nivel raíz y a otros

Justo después de abrir la etiqueta de secuencia de comandos, simplemente agréguela import someImage from '../assets/someImage.png' y úsela para una URL de iconoiconUrl: someImage

¿Qué sistema estás usando? Webpack? Vue-loader?

Solo haré una lluvia de ideas aquí ...

Debido a que .png no es un archivo JavaScript, deberá configurar Webpack para usar el cargador de archivos o el cargador de URL para manejarlos. El proyecto con scaffolding con vue-cli también lo ha configurado para usted.

Puedes echarle un vistazo webpack.conf.jspara ver si está bien configurado como

...
    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
...

/assets es para archivos que son manejados por webpack durante la agrupación; para eso, deben ser referenciados en algún lugar de su código javascript.

Se pueden colocar otros activos /static, el contenido de esta carpeta se copiará /distmás tarde como está.

Te recomiendo que pruebes a cambiar:

iconUrl: './assets/img.png'

a

iconUrl: './dist/img.png'

Puede leer la documentación oficial aquí: https://vue-loader.vuejs.org/en/configurations/asset-url.html

¡Espero que te ayude!

Tener una estructura predeterminada de carpetas generadas por Vue CLI, por ejemplo src/assets, puede colocar su imagen allí y hacer referencia a esto desde HTML de la siguiente <img src="../src/assets/img/logo.png">manera (también funciona automáticamente sin cambios en la implementación).

Estoy usando mecanografiado con vue, pero así es como lo hice

<template><div><img :src="MyImage" /></div></template>
<script lang="ts">
    import { Vue } from 'vue-property-decorator';
    export default class MyPage extends Vue {
            MyImage = "../assets/images/myImage.png";
        }
</script>

Por supuesto que src="@/assets/images/x.jpgfunciona, pero la mejor manera es: src="~assets/images/x.jpg