Vue.js поддерживает привязку img src к псевдониму веб-пакета (@) - PullRequest
Новая
       18

Vue.js поддерживает привязку img src к псевдониму веб-пакета (@)

0 голосов
/ 26 июня 2018

мое приложение vue, сделайте привязку img-src псевдонимом. это работает прямое использование. 

<img src="@/assets/search.png" />

Но этот код создает компонент, псевдоним не разрешается. 

<template>
  <div class="button-card">
    <img :src="src">
  </div>
</template>

<script>
export default {
  name: 'Button Card',
  props: {
    src: {
      type: String,
    },
  },
};
</script>

С результатом сборки компонента html: 

<div class="button-card">
  <img src="@/assets/search.png">
  <!-- should be with resolve: src/assets/search.png -->
</div>

Псевдоним Webpack определяет конфигурацию: 

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
  }
},

Почему этот код не разрешен? или что я могу сделать, чтобы он работал?

Ответы [ 2 ]

0 голосов
/ 26 июня 2018

Я думаю, что следует использовать data вместо props (вы не создаете новый компонент и не отправляете ему реквизиты).

Вы можете попробовать с: 

<img :src="require('@/assets/search.png')" />

Это сокращение для: 

<template>
  <div id="app">
    <img :src="image" />
  </div>
</template>

<script>
import image from "@/assets/search.png"


export default {
    data: function () {
        return {
            image: image
        }
    }
}
</script>

Здесь и здесь вы можете увидеть, как это работает, и схожие проблемы.

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

0 голосов
/ 26 июня 2018

Я считаю, что псевдонимы веб-пакетов работают только при импорте, см. https://webpack.js.org/configuration/resolve/#resolve-alias:

Создание псевдонимов для import или , требующих определенных модулей. Например, для псевдонима нескольких часто используемых папок src /:

В вашем случае @/assets/search.png - это простая строка.

Полагаю, вы могли бы использовать здесь динамическую функцию import(), например: return () => import(this.src).

...