Vue JS中的图像路径

ded*_*ono 2 javascript arrays vue.js

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

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

--components
----用户
------ userStart.vue

我将使用数组中的对象显示图像,这是我的代码(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'
         }
      ]
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

问题是我无法显示图像,如何修复?谢谢

San*_*jay 7

您可以使用 require()

例如:

<img v-for="image in images" :src="require(image.url)">
Run Code Online (Sandbox Code Playgroud)

  • 对我有用的是将JS中的`require`包装在`{url:require('../../ assets / image1.png')}}中。 (3认同)