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

Question

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

有人可以帮我怎么做吗？

---

模板:

  <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"
       ]
     }
   }
}

---

Answer 1

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

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

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