Vue JS中的图像路径 [英] Image path in Vue JS

问题描述

我在vue js中有这样的结构文件:

I have structure file in vue js like this:

-资产
----图像
------ my-image.png
------ my-image2.png

--assets
----image
------my-image.png
------my-image2.png

-组件
----用户
------ userStart.vue

--components
----user
------userStart.vue

我将使用数组中的对象显示图像这是我的代码(userStart.vue)

I will show the image using object in array here is my code (userStart.vue)

<img v-for="image in images" :src="image.url"/>

export default{
  data(){
    return {
      images : [
         {
            url : '../../assets/image/my-image.png',
            name : 'My Image 1',
         },
         {
            url : '../../assets/image/my-image1.png',
            name : 'My Image 2'
         }
      ]
    }
  }
}

问题是我无法显示图像，如何解决?谢谢

The problem is I cannot show the image, how to fix it? Thank you

推荐答案

您可以使用 require()

例如:

<img v-for="image in images" :src="require(image.url)">

这篇关于Vue JS中的图像路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！