Estou procurando o url certo para fazer referência a ativos estáticos, como imagens no javascript do Vue.

Por exemplo, estou criando um marcador de folheto usando uma imagem de ícone personalizada e tentei vários urls, mas todos retornam um 404 (Not Found):

Main.vue:

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

Tentei colocar as imagens na pasta de ativos e na pasta estática, sem sorte. Tenho que dizer ao vue para carregar essas imagens de alguma forma?

Para quem deseja consultar imagens do modelo, você pode consultar imagens diretamente usando '@'

Exemplo:

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

Em uma configuração normal do Vue, /assetsnão é servido.

Em src="data:image/png;base64,iVBORw0K...YII="vez disso, as imagens se transformam em fios.

Usando de dentro do JavaScript: require()

Para obter as imagens do código JS, use require('../assets.myImage.png') . O caminho deve ser relativo (veja abaixo).

Portanto, seu código seria:

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
    // ...
});

Use caminho relativo

Por exemplo, digamos que você tenha a seguinte estrutura de pastas:

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

Se você quiser fazer referência à imagem em MyComponent.vue, o caminho deve ser../assets/myImage.png

Aqui está um DEMO CODESANDBOX mostrando-o em ação.

Uma solução melhor seria

Adicionando algumas boas práticas e segurança à resposta de @acdcjunior, para usar em @vez de./

Em JavaScript

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

No modelo JSX

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

usando @aponta para o srcdiretório.

usando ~pontos para a raiz do projeto, o que torna mais fácil acessar o node_modulese outros recursos de nível raiz

Para que o Webpack retorne os caminhos de ativos corretos, você precisa usar require ('./ relative / path / to / file.jpg'), que será processado pelo carregador de arquivos e retornará a URL resolvida.

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

Consulte os modelos VueJS - Manipulação de ativos estáticos

Logo após abrir a tag do script, basta adicioná-la import someImage from '../assets/someImage.png' e usá-la para um URL de íconeiconUrl: someImage

Que sistema voce está usando? Webpack? Vue-loader?

Vou apenas brainstorming aqui ...

Como .png não é um arquivo JavaScript, você precisará configurar o Webpack para usar o carregador de arquivos ou o carregador de url para lidar com eles. O projeto scaffolded com vue-cli também configurou isso para você.

Você pode dar uma olhada webpack.conf.jspara ver se está bem configurado como

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

/assets é para arquivos que são manipulados por webpack durante o empacotamento - para isso, eles devem ser referenciados em algum lugar em seu código javascript.

Outros ativos podem ser colocados /static, o conteúdo desta pasta será copiado para/dist posteriormente como está.

Eu recomendo que você tente mudar:

iconUrl: './assets/img.png'

para

iconUrl: './dist/img.png'

Você pode ler a documentação oficial aqui: https://vue-loader.vuejs.org/en/configurations/asset-url.html

Espero que ajude você!

Ter uma estrutura padrão de pastas geradas pelo Vue CLI, como src/assetsvocê pode colocar sua imagem lá e consultar isso a partir do HTML como segue <img src="../src/assets/img/logo.png">(funciona automaticamente sem qualquer alteração na implantação também).

Estou usando o texto datilografado com o vue, mas foi assim que fiz isso

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

isso finalmente funcionou para mim, a imagem passou como suporte:

<img :src="require(`../../assets/${image}.svg`)">

Claro que src="@/assets/images/x.jpgfunciona, mas a melhor maneira é: src="~assets/images/x.jpg