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

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

Main.vue:

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

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

JBaczuk

Ответов: 11

Ответы (11)

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

Пример:


это, наконец, сработало для меня, изображение прошло как опора:


При обычной настройке 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, показывающий его в действии.

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

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



У меня это работает, если я использую такой синтаксис:

$('.eventSlick').slick({
    dots: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: false,
    autoplaySpeed: 2000,
    arrows: true,
    draggable: false,
    prevArrow: '',

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

Чтобы 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


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

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

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

Какую систему вы используете? 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

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

2022 WebDevInsider