美文网首页
vue中引入图片的小坑

vue中引入图片的小坑

作者: 疯泽清 | 来源:发表于2020-11-10 14:19 被阅读0次

1.静态的img路径直接写你当前图片路径就好了

<imgclass="Width100 Height100"src="../img/headImage.png">

2.动态引入  图片资源放在 static  下

        这是我代码中引入天气预报的一段代码

<ul class="weather">

          <li v-for="(item, index) in weatherData" :key="index">

              <p>{{ item.day }}</p>

              <img :src="getImg(item)" alt="">

              <div>{{ item.HighTemperature }}℃</div>

              <div class="rote">~</div>

              <div>{{ item.LowTemperature }}℃</div>

            </li>

          </ul>

3. methods中写方法

 getImg(item) {

      return require('../../assets/weather/' + item.CheckMan + '.png')

    }

                                                                记录问题及时备用

相关文章

网友评论

      本文标题:vue中引入图片的小坑

      本文链接:https://www.haomeiwen.com/subject/bwhjbktx.html