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

90

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

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

Main.vue:

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

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

JBaczuk
источник
webpack? Обычно он хочет знать, включено ли изображение, чтобы оно было помещено в пакет. Другим системам связывания, вероятно, все равно, пока образ будет развернут на вашем сервере
Акатакритос

Ответы:

158

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

Пример:

<img src="@/assets/images/home.png"/>
azy777
источник
2
... если у вас есть папка src / assets / images. По умолчанию vue-loader копирует ресурсы из src / .. / ... для создания /../ .. ИЛИ автоматически вставляет меньшие изображения как data.image / png ...
Йоханнесс
9
у меня не сработало: This dependency was not found:* @/assets/more-ico.svg. To install it, you can run: npm install --save @/assets/more-ico.svg...
Якуб Стребейко
2
У меня тоже не сработало, но ..... я тогда увидел, что использовал неправильное имя файла; p отлично работает!
Ларзан
6
Это работает, но templateесли вы хотите использовать свойство background-img в css, попробуйте что-нибудь вроде ../../assets/bg/login.svg, с изображением в папке с ресурсами
calebeaires
5
Спасибо. Документация vue по статическим ресурсам излишне многословна и скрывает этот основной вариант использования почти в нижней части страницы, в крошечном пункте.
Our_Benefactors
65

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

acdcjunior
источник
2
После создания моего приложения с помощью vue-cli этот метод у меня сработал. Песочница кода была очень полезной. Ответ не так ясен, как песочница кода.
revdrjrr
require('./assets/img.png')не работал у меня в опциях моего компонента, мне пришлось заменить. с @: require('@/assets/img.png').
Майкл
22

Чтобы 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 - Обработка статических активов

Юси
источник
21

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

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

В JavaScript

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

В шаблоне JSX

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

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

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

Мухаммад
источник
Что, если это не изображение, а текстовый файл или CSV? И просто хотите получить путь / URL?
траиноз
7

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

Небераа
источник
Это хорошо сработало для меня при включении '@' в импорт.
vab2048
2

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

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

JP. Аулет
источник
Я не уверен, какую систему я использую, и нужно ли добавлять ее вручную. Я попробовал URL-адрес ./dist, и
безуспешно
0

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

Даниэль Даниелецки
источник
0

Я использую машинописный текст с 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>
Майкл
источник
-3

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

Фарзад.Камали
источник
2
Вы можете дать объяснение?
JBaczuk