Я шукаю правильну URL-адресу для посилання на статичні ресурси, такі як зображення в Javascript Vue.

Наприклад, я створюю маркер листівки за допомогою зображення власного значка, і я спробував кілька 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"/>

використання @точок до srcкаталогу.

використання ~точок до кореня проекту, що полегшує доступ до ресурсів node_modulesта інших кореневих рівнів

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

Яку систему ви використовуєте? Веб-пакет? Vue-loader?

Я буду тут лише міркувати ...

Оскільки .png не є файлом JavaScript, вам потрібно буде налаштувати Webpack для використання файлового завантажувача або url-loader для їх обробки. Проект, який розміщений за допомогою 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