html Vue.js动态图像在v-for中不工作

szqfcxe2 于 2022-12-28 发布在 Vue.js

关注(0)|答案(1)|浏览(132)

我试图显示一些图像内的v-为把结果在img src="”

<div v-for="piatto in portata" class="card mb-3">
        <div class="row">
          <div class="col-lg-4">
            <img src="'/img/food/' + piatto.img_id + '.jpg'" alt="" style="height:;" class="img-fluid rounded-start img-thumbnail" >
          </div>
          <div class="col-lg-8">
              <div class="card-body mt-3">
                <h3 class="card-title">{{piatto.food_name}}</h3>
                <h4 class="card-text text-primary">{{piatto.price}}€</h4>
                <button type="button" @click="sendOrder(piatto.food_name)" class="btn btn-dark">Aggiungi</button>
              </div>
          </div>
        </div> 
      </div>

〈img src=“'/img/food/' + piatto.img_id + '. jpg'”语法似乎不起作用。我不知道我是否在语法上犯了什么错误，或者这种解决问题的方法根本不可行。我对vue很陌生。提前感谢

Html

来源：https://stackoverflow.com/questions/74899866/vue-js-dynamic-images-not-working-in-v-for

1条答案

按热度按时间

wtzytmuj1#

如果您使用Webpack

如果图像托管在Internet上的某个位置，则可以执行此操作

<template>
  <section style="display: flex">
    <div v-for="element in elements" :key="element.id" class="">
      <img :src="`${imageInitialUrl}${element.imageId}`" />
      <p>{{ element.name }}</p>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      imageInitialUrl: 'https://source.unsplash.com/random/200x200?sig=',
      elements: [
        {
          id: 1,
          name: 'bob',
          imageId: '1',
        },
        {
          id: 2,
          name: 'patrick',
          imageId: '2',
        },
        {
          id: 3,
          name: 'sarah',
          imageId: '3',
        },
      ],
    }
  },
}
</script>

看起来就是这样。

如果图像是本地的，则其编写方式如下

<img :src="require(`@/assets/images/${element.imageId}.jpg`)" />

采用这种结构

赞(0）回复(0）举报 2022-12-28

我来回答

html Vue.js动态图像在v-for中不工作

1条答案

如果您使用Webpack

相关问题

热门标签

最新问答