Cómo hacer referencia a activos estáticos dentro de vue javascript


90

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?


paquete web? Eso generalmente quiere saber si se incluye una imagen para que se coloque en el paquete. A otros sistemas de agrupación probablemente no les importe, siempre que la imagen se implemente en su servidor
akatakritos

Respuestas:


158

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

Ejemplo:

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

2
... dado que tiene una carpeta src / assets / images. Fuera de la caja, vue-loader copia activos de src / .. / ... para construir /../ .. O inserta imágenes más pequeñas como data.image / png .. automáticamente.
Johanness

9
no funcionó para mí: This dependency was not found:* @/assets/more-ico.svg. To install it, you can run: npm install --save @/assets/more-ico.svg...
Jakub Strebeyko

2
Tampoco funcionó para mí, pero ... vi entonces que usé el nombre de archivo incorrecto; ¡p funciona perfectamente!
Larzan

6
Funciona, pero template, si desea usar la propiedad css background-img, intente algo como ../../assets/bg/login.svg, con la imagen en la carpeta de activos
calebeaires

5
Gracias. La documentación de vue sobre activos estáticos es innecesariamente detallada y oculta este caso de uso principal casi en la parte inferior de la página, en una pequeña viñeta.
Our_Benefactors

65

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.


2
Después de montar mi aplicación con vue-cli, esta técnica funcionó para mí. La zona de pruebas del código fue muy útil. La respuesta no es tan clara como la zona de pruebas del código.
revdrjrr

require('./assets/img.png')no funcionó para mí en las opciones de mi componente, tuve que reemplazar el. con un @: require('@/assets/img.png').
Michael

22

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


21

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


¿Qué pasa si no es una imagen sino un archivo de texto o csv? ¿Y solo quieres obtener la ruta / url?
Trainoasis

7

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


Esto funcionó bien para mí al incorporar la '@' en la importación.
vab2048

2

¿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!


No estoy seguro de qué sistema estoy usando o si tengo que agregarlo manualmente. Probé la URL ./dist y no
tuve

0

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).


0

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>

-3

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


2
¿Puede dar una explicación?
JBaczuk
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.