时间戳

首页 > 解决方案 > 如何在Vue中本地添加图像？

vue.js - 如何在Vue中本地添加图像？

问题描述

我想在我的项目中添加一张照片，但由于某种原因它不想在本地添加

有人可以帮我怎么做吗？

模板：

  <li v-for="book in books" :key="book.id">
  
             *Some code here*
  
   <img :src="book.image"/> <<<-----Here
 </li>

脚本：

export default {
   data() {
     return{
       books: [
        image: "../assets/images/a-Dolls-house.jpg"
       ]
     }
   }
}

我的目录

标签： vue.js

解决方案

更改<img :src="book.image"/>为<img :src="require(book.image)"/>

这将起作用，因为资产文件夹对浏览器不公开。这意味着当您尝试从assets文件夹调用时，它找不到指定的路径，因为网络服务器找不到该assets文件夹​​。然而，通过调用require我们从文件夹中加载图像assets，并将其转换为 base 64 编码图像。当它被编译到你的块中时，浏览器可以看到它。

您拥有的另一个选择是将images文件夹移动到public目录并将图像属性更改为image: "/images/a-Dolls-house.jpg". 然后图像将是公开的，可以从浏览器访问。不会增加块大小或增加内存开销，因为图像将被链接而不是编译。

推荐阅读