Question

我正在学习如何使用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 / ...”等，因为我不确定vuejs从哪个位置搜索图片。

当我运行代码时，所有图像都能正确显示，除了图像被“找不到图像”符号代替：

result

Answer 1

正如阿尔伯特（Albert）在评论中所说，您至少有两种加载图像的方式：删除斜杠（例如var str = "a , b=10 , c=add(3,b) , d" parts = str.split(/\s*,\s*(?![^(]*\))/); console.log(parts);），或者更好的方法是，在斜线之前添加assets/foo.jpg来链接它们。相对路径，例如：@；简而言之，@/assets/foo.jpg加载~相对路径，例如，如果您要链接Bootstrap，而/node_modules/代表@。

Answer 2

这取决于您保存图像的位置。在您的情况下，将require与id=[f'GeneID_region_{i}' for i in range(43)] value=[f'GeneValue_region_{i}' for i in range(43)] lst=[] for i in range(43): lst.append(id[i]) lst.append(value[i]) df = pd.DataFrame([[0 for i in range(43+43)]],columns=lst)路径src一起使用：

(@)

Answer 3

这是因为v-bind中的表达式是在运行时执行的，因此webpack别名在编译时起作用。

尝试像这样将网址包装在SERVERPROPERTY('ProductVersion')中：

require

图片未显示在VueJS的组件中

3 个答案: