Включение и ссылка на изображение в плагине vuejs на основе веб-пакета приводит к 404 при добавлении в основной проект - PullRequest
Новая
       18

Включение и ссылка на изображение в плагине vuejs на основе веб-пакета приводит к 404 при добавлении в основной проект

0 голосов
/ 06 января 2020

Я застрял на этом в течение нескольких дней, и после многих поисков в Google и stackoverflow безрезультатно, я думаю, что пришло время задать вопрос.

У меня есть плагин 'demo' vuejs которые можно найти здесь . При этом один / основной компонент содержит ссылку на статическое c изображение, продаваемое в проекте. Хотя ссылка на это изображение, продаваемое в проекте, работает для примера приложения ( yarn serve ), когда я устанавливаю плагин в другом проекте vuejs и пытаюсь загрузить компонент, изображение не отображается должным образом.

По сути, я хотел бы сделать это: 

<template>
  <div id="nyan-cat">
    <img :src="img" />
  </div>
</template>

<script>
import img from "./assets/nyan-cat.gif"

// Note: this also does _not_ work:
// const img = require('./assets/nyan-cat.gif')

// Note: also replacing "." with "@" in either of the above does _not_ work

export default {
  name: 'NyanCat',
  data : function(){
    return {img : img};
  }
}
</script>

<style scoped>
#nyan-cat{
  display: inline-block;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
}
</style>

Когда включить плагин в другой проект vuejs ( пряжа добавить vue -nyan-cat ) и запустите его ( подача пряжи ) и откройте его в браузере, я получу 404 Not Found для изображения, и, проверяя его в веб-консоли, очевидно, что href для изображение (http://localhost: 8080 / js / img / nyan-cat.0fea47ea.gif ) неверно. Также, проверяя __ webpack_require __. P , используемый для изображения во встроенном плагине (dist / vue -nyan-cat2.common. js) через console.log, я замечаю, что это неправильно: http://localhost: 8080 / JS / . Вот лог c в «основном» приложении, которое импортирует и использует плагин: 

  <template>
    <div id="app">
      <NyanCat />
    </div>
  </template>

  <script>
  import NyanCat from 'vue-nyan-cat'
  import 'vue-nyan-cat/dist/vue-nyan-cat.css'

  export default {
    name: 'app',
    components: {
      NyanCat
    }
  }
  </script>

  <style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  </style>

До этого момента я пробовал много вещей, в том числе возиться с webpack.config. js файл в проекте плагина vue -nyan-cat: 

module.exports = {
    module: {
      rules: [
        {
          test: /\.(png|jpg|gif|svg)$/,
          //loader: 'file-loader?name=img/[name].[ext]?[hash]',
          use : [{ loader : 'file-loader' }]
        }
      ],
    },

    resolve : {
      alias : {
        '@': path.resolve(__dirname, 'src')
      }
    }
};

Кажется, ничего не работает, и у меня закончились идеи. Пожалуйста, гуру stackoverflow, помогите мне с моей загадкой!

Большое спасибо

...