Question

我正在尝试通过使用来自props的src属性路径来显示带有img标签的图像。

我尝试使用@更改路径，使用src使用整个路径，在组件中添加../assets/并且仅传递文件名（orange.png）作为道具。我总是会显示默认的损坏图像。在浏览器中检查时，该路径看起来不错。直接显示图像时，可以看到该路径已解析为其他路径<img data-v-1212d7a4="" src="/img/orange.7b71a54c.png">。

编辑： 另外，我尝试了这篇帖子Can't dynamically pass relative src path for imgs in Vue.js + webpack，给出使用<img :src="require(picture_src)" />作为答案的地方。这会导致错误：Error in render: "Error: Cannot find module '../assets/orange.png'"

（ Edit2： 最终，该答案最终对我有用，如我的答案中所述。）
在我的脚本部分中使用let images = require.context('../assets/', false, /\.png$/)的类似webpack方法会出现相同的错误，作为本帖子Can't dynamically pass relative src path for imgs in Vue.js + webpack的答案。

我是Vue.js的新手，所以我不完全知道发生了什么或如何搜索它，或者它可能与我最初尝试的内容无关。

当我直接通过路径时，我可以显示图像

<img src="../assets/orange.png"/>

现在，我实际上想将其传递到道具中的组件，然后在组件内部显示它以读取道具的路径。

组件

<template>
  <div>
    <img :src=picture_src />
    <div class="pic_sub">{{pic_desc}}</div>
  </div>
</template>
<script>
export default {
  name: 'PictureCard',
  props: {
    picture_src: String,
    pic_desc: String
  }
}
</script>

使用组件：

<template>
  <div>
    <PictureCard pic_desc='some description text' picture_src='../assets/orange.png' />
  </div>
</template>

<script>
import PictureCard from './components/PictureCard.vue'
export default {
  name: 'app',
  components: {
    PictureCard
  }
}
</script>

如果可能的话，我很乐意通过穿过组件道具的路径来展示我的照片。

否则，在这种情况下，我很想知道其他一些解决方案，变通方法或最佳实践知识。

Answer 1

经过研究，我了解到我的问题与webpack和解析文件路径有关。我使用了此答案的修改版本：
Vue.js dynamic images not working
这个答案：
Can't dynamically pass relative src path for imgs in Vue.js + webpack
由于第二个答案中的链接已失效，因此这里是require.context文档的有效链接： https://webpack.js.org/guides/dependency-management/#requirecontext

尝试第二个链接的答案时，我的错误是我仅返回orange.png作为路径，而我需要在开头添加./。

我的工作画面组件现在看起来像这样。

<template>
  <div>
    <img :src="resolve_img_url(picture_src)" />
    <div class="pic_sub">{{pic_desc}}</div>
  </div>
</template>
<script>
export default {
  name: 'PictureCard',
  props: {
    picture_src: String,
    pic_desc: String
  },
  methods: {
    resolve_img_url: function (path) {
      let images = require.context('../assets/', false, /\.png$|\.jpg$/)
      return images("./"+path)
    }
  }
}
</script>

我编辑了正则表达式以匹配.png和.jpg文件的结尾。因此，现在传递道具看起来像这样

<PictureCard  picture_src='orange.png' pic_desc='some picture description'/>

Answer 2

这对我有用

<img :src="require(`@/assets/img/${filename}`)">

其中filename作为prop传入，例如"myImage.png"。

确保使用项目专用的路径。

来源：https://github.com/vuejs-templates/webpack/issues/450

Answer 3

这是我最喜欢的超级简单方法。它可以轻松地在项目中任何文件夹中的任何文件中重复使用。从父级的角度来看，只需将实际路径作为字符串传递即可。

//some file
    <ParentA>
      <ImageComponent 
         myImagePath="../../../../../myCat.png"
      />
    </ParentA>

//some other file in a different folder in my project
    <ParentB>
      <ImageComponent 
         myImagePath="../../myCat.png"
      />
    </ParentB>


//child component file
<template functional>
   <div>
      <img :src="props.myImagePath">
   </div>
</template

Answer 4

那对我不起作用：D

模板文件错误！在设置道具之前，您需要添加“：”。

这就是我应该如何使用PictureCard

<PictureCard  :picture_src="require('orange.png')"
 pic_desc='some picture description'/>

这就是我的PictureCard的外观：

<template>
  <div>
    <img v-bind:src="picture_src" />
  </div>
</template>

export default class PictureCard extends Vue {

@Prop({ default: require("@/assets/orange.svg") }) img!: string
 }

以防万一没有设置道具，所以我也添加了默认道具。是的，我只使用了图像。

从Vue.js中的props传递并绑定img src

4 个答案: