Как ссылаться на статические ресурсы в vue javascript

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

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

Main.vue:

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

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

Ответы

Ответ 1

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

Пример:

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

Ответ 2

В регулярной настройке 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',
    // ...
});


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

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

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

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


Здесь DEMO CODESANDBOX показывает это в действии.

Ответ 3

Чтобы Webpack возвращал правильные пути к ресурсам, вам нужно использовать require ('./lative/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 - обработка статических активов.

Ответ 4

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

Ответ 5

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

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

Поскольку.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 - это файлы, которые обрабатываются webpack во время связывания - для этого им нужно ссылаться где-то в вашем javascript-коде.

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

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

iconUrl: './assets/img.png'

в

iconUrl: './dist/img.png'

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

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

Ответ 6

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

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

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

использование @ указывает на каталог src.

использование ~ указывает на корневой каталог проекта, что облегчает доступ к node_modules