Изображения не отображаются в компонентах в VueJS - PullRequest
Новая
       1

Изображения не отображаются в компонентах в VueJS

0 голосов
/ 18 марта 2020

Я учусь использовать VueJS, и мне удалось сделать простую страницу, показывающую меню ресторана (в одном файле).

Теперь я использую vue -cli и изменил то, что я сделал: все работает, кроме изображений.

Моя структура выглядит следующим образом: 

/node_modules
/public
/src
    /assets
        /picture.jpg
        /[...]
    /components
        /MenuItem.vue
    App.vue
    main.ts

В src / App. vue: 

<template>
[...]
         <ul>
            <MenuItem
              v-for="plat in plats"
              :name="plat.name"
              :price="plat.price"
              :url="plat.url"
              :role="role"
              :plat="plat"
              :supprimer="supprimer"
              :key="plat.name"
            />
         </ul>
[...]
</template>

<script>
import MenuItem from './components/MenuItem'

export default {
  name: 'App',
  components: {
    MenuItem
  },
  data() {
    return{
      plats: [
        {name: "Steak de boeuf", price: 5.99, url: "/assets/steak.jpg"},
        {name: "Coq au vin", price: 8.99, url: "/assets/coq.jpg"},
        {name: "Gencives de porc", price: 12.99, url: "/assets/porc.jpg"},
        {name: "Entrée", price: 4.99, url: "/assets/entrée.jpg"},
        {name: "Plat du jour", price: 14.99, url: "/assets/plat.jpg"}],
[...]
</script>

В src / components / MenuItem. vue: 

<template>
    <li class="plat">
        <img :src="url"/><p> {{ name }} - {{ price }}€</p>
        <p v-if="role=='admin'" @click="supprimer(plat)"> Supprimer le plat </p>
    </li>
</template>

<script>
export default {
  name: 'MenuItem',
  props: ['name','price','url','role','plat','supprimer']
}
</script>

Я думал, что это может быть из-за пути изображений, но я пробовал абсолютные / родственные пути, и ничего не работало. Я попытался изменить путь на "./assets / ...", "./src/assets / ...", et c, потому что я не уверен, из какого места vuejs ищет pictures.

Когда я запускаю код, все отображается правильно, за исключением того, что изображения заменяются символом «not found image»:

result

Ответы [ 3 ]

0 голосов
/ 18 марта 2020

Это зависит от того, где вы храните свои изображения. В вашем случае используйте require с src пах (@): 

plats: [
    {
      name: "Steak de boeuf",
      price: 5.99,
      url: require('@/assets/steak.jpg')
    }
]
0 голосов
/ 18 марта 2020

Это связано с тем, что выражение внутри v-bind выполняется во время выполнения, псевдонимы веб-пакетов работают во время компиляции.

Попробуйте добавить URL-адрес в require следующим образом: 

{name: "Steak de boeuf", price: 5.99, url: require("assets/steak.jpg")}
0 голосов
/ 18 марта 2020

Как сказал Альберт в комментарии, у вас есть как минимум два способа загрузки изображений: удаление sla sh (например, assets/foo.jpg) или, лучше, связать их, просто добавив @ перед относительным путь как: @/assets/foo.jpg; короче говоря, ~ загружает относительный путь /node_modules/, например, если вы хотите связать Bootstrap, тогда как @ обозначает /src/.

...