Vue.js компонент img src из проп? - PullRequest
Новая
       8

Vue.js компонент img src из проп?

0 голосов
/ 01 сентября 2018

Я пытаюсь сделать следующее, но изображение не выводится правильно. Где я отображаю изображение в display.vue, если я печатаю {{someText}}, я получаю правильный путь к файлу (../assets/city.png).

display.vue 

<template>
    <example :someText="'../assets/' + stamp + '.png'"></example>
</template>

<script>
import example from './example.vue'

export default {
    name: "",
    data() {
        return {
            stamp: "city"
        }
    }
    components: [
        example
    ]
};
</script>

example.vue 

<template>
    <img :src="someText" />
</template>

<script>
    export default {
      name: "example",
      props: ["someText"]
    };
</script>

Ответы [ 2 ]

0 голосов
/ 01 сентября 2018

Такого рода вещи произошли и со мной. В вашем example.vue попробуйте это 

<template>
    <img src="../assets/city.png" />
</template>

Если это не дает правильный вывод. Тогда попробуйте с полным путем 

<template>
    <img src="src/assets/city.png" />
</template>

В моем случае изображение не читалось с ../assets/city.png, но читалось с src/assets/city.png

0 голосов
/ 01 сентября 2018

Вам необходимо изменить формат корпуса вашего реквизита:

Имена атрибутов HTML не чувствительны к регистру, поэтому браузеры будут интерпретировать любые заглавные буквы как строчные. Это означает, что когда вы используете в шаблонах in-DOM, имена реквизитов в CamelCase должны использовать их в шашлыке (разделенные дефисом) эквиваленты ( источник )

Это должно работать следующим образом: 

<template>
  <example :some-text="'../assets/' + stamp + '.png'"></example>
</template>
...