Я ищу правильный URL-адрес для ссылки на статические ресурсы, такие как изображения в Vue javascript.

Например, я создаю маркер листовки, используя пользовательское изображение значка, и я пробовал несколько URL-адресов, но все они возвращают 404 (Not Found):

Main.vue:

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

Я попытался поместить изображения в папку с ресурсами и статическую папку, но безуспешно. Должен ли я сказать vue, что нужно как-то загрузить эти изображения?

Для тех, кто хочет ссылаться на изображения из шаблона, вы можете ссылаться на изображения напрямую, используя '@'

Пример:

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

В обычной настройке Vue /assetsне обслуживается.

src="data:image/png;base64,iVBORw0K...YII="Вместо этого изображения становятся строками.

Использование из JavaScript: require()

Чтобы получить изображения из кода JS, используйте require('../assets.myImage.png'). Путь должен быть относительным (см. Ниже).

Итак, ваш код будет:

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

Использовать относительный путь

Например, предположим, что у вас есть следующая структура папок:

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

Если вы хотите сослаться на изображение в MyComponent.vue, путь должен быть../assets/myImage.png

Вот DEMO CODESANDBOX, демонстрирующий его в действии.

Чтобы Webpack возвращал правильные пути к ресурсам, вам необходимо использовать require ('./ relative / path / to / file.jpg'), который будет обработан файловым загрузчиком и вернет разрешенный URL.

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

См. Шаблоны VueJS - Обработка статических активов

Лучшим решением было бы

Добавление некоторых передовых практик и безопасности к ответу @acdcjunior, чтобы использовать @вместо./

В JavaScript

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

В шаблоне JSX

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

using @указывает на srcкаталог.

использование ~точек на корень проекта, что упрощает доступ к node_modulesресурсам корневого уровня и другим ресурсам

Сразу после добавления тега скрипта просто добавьте import someImage from '../assets/someImage.png' и используйте его для URL- адреса значкаiconUrl: someImage

Какую систему вы используете? Webpack? Vue-загрузчик?

Я здесь только мозговой штурм ...

Поскольку .png не является файлом JavaScript, вам необходимо настроить Webpack для использования загрузчика файлов или загрузчика URL для их обработки. Проект, созданный с помощью vue-cli, также настроил это за вас.

Вы можете взглянуть на него webpack.conf.js, чтобы убедиться, что он хорошо настроен, например

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

/assets предназначен для файлов, которые обрабатываются веб-пакетом во время сборки - для этого на них должна быть ссылка где-то в вашем коде javascript.

Можно добавить другие ресурсы /static, содержимое этой папки будет скопировано /distпозже как есть.

Рекомендую попробовать изменить:

iconUrl: './assets/img.png'

к

iconUrl: './dist/img.png'

Вы можете прочитать официальную документацию здесь: https://vue-loader.vuejs.org/en/configurations/asset-url.html

Надеюсь, это поможет вам!

Имея структуру папок по умолчанию, сгенерированную Vue CLI, например, src/assetsвы можете разместить там свое изображение и ссылаться на него из HTML следующим образом <img src="../src/assets/img/logo.png">(работает автоматически без каких-либо изменений при развертывании).

Я использую машинописный текст с vue, но вот как я это сделал

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

Конечно src="@/assets/images/x.jpgработает, но лучший способ: src="~assets/images/x.jpg