VueJS 组件中的图像未加载

Posted 2023-02-22

【中文标题】VueJS 组件中的图像未加载

【英文标题】：Image in VueJS component is not loading

【发布时间】：2019-05-09 23:58:25

【问题描述】：

我有一个父组件，它向子组件发送数据对象，如下所示：

<child object-data=" url: 'url here', title: 'Title'"></child>

然后在我的子组件上，我通过以下方式获取此对象数据：

<script>
    export default 
        props: [
            'objectData'
        ]
    
</script>

现在，出于某种原因，我可以毫无问题地使用标题，例如 objectData.title 并显示出来。

但是当涉及到 img 标签内的 URL 时，它不会呈现图像。

我尝试执行以下操作：

<img :src="objectData.url"/>

<img v-bind:src="objectData.url"/>

<img v-bind:src="require(objectData.url)"/>

<img v-bind:src="objectData.url"/>

<img v-bind:src="objectData.url"/>

当我检查 dom 元素时，它甚至不包含 src 属性。

如果我写下没有对象的 URL，它会起作用。

<img v-bind:src="src/assets/images/icon.png"/>

但我希望我的 URL 来自父组件。

关于如何解决这个问题的任何想法？我在我的 webpack 文件中添加了 url-loader：

            
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader'
            

我还尝试从计算/方法函数返回 objectData.url：

computed: 
     getImageUrl: function() 
           return objectData.url;
     

然后像:src=“getImageUrl” 或:src=“getImageUrl” 一样使用它，我也不走运。

【问题讨论】：

是的，我之前遇到过同样的问题，我没有搜索解决方案，但是当我使用像 https://picsum.photos/500/300?image=5 这样的网址时，它工作正常

@BoussadjraBrahim 哦，我必须检查一下，但是是的，虽然我的图像将存储在我的 CDN 中，所以它可以作为外部 url...但是必须有办法做到这一点为测试目的工作哈哈

是的，我同意你的看法，我已经打开该项目以使用存储在 assets 文件夹中的图像找到解决方案

当您检查呈现页面上的元素时，它的src 设置为什么？对吗？

@RoyJ src 属性完全消失了。

【参考方案1】：

我遇到了同样的问题，我使用require 函数修复了它：

在父组件App.vue：

<carousel-posts :posts="posts" />

export default 
 name: "app",
data() 
  return 
   posts: [
     
      img: require("./assets/logo.png"),
      title: "Title 1",
      subTitle: "Sub Title 1",
      body:"lorem ipsum ..."
    
    ...
    ]
    ;
   
  ...
 

在子组件中，我循环遍历posts 并绑定图像src，如下所示：

    <div class="card-body" v-for="(post,idx) in posts" >
      <img class="card-img" :src="post.img" />
         ...
     </div>

        <script>
           export default 
            props: ["posts"],
           ...

所以在你的情况下，你应该有类似的东西：

     <child :object-data="objectData"></child>

        ...
     data() 
          return
            dataObject:
              url: require('./assets/someimg.png'), 
              title: 'Title'
             
            
          

更新：

我的项目树：

   src
   |_assets
   |   |_logo.png
   |_components
   |   |_CarouselPosts.vue
   |_App.vue

【讨论】：

我会在几分钟内一回家就试一试！谢谢你的回答。

不客气，它对我有用，我希望对你有用

我得到一个：找不到模块：错误：无法解析“somepath”中的“src/assets/images/image.png”。似乎 require('') 没有解析我的图像的路径。有什么想法吗？

如果父组件位于项目结构中assets文件夹的同一级别，则应使用./assets/images/image.png

不客气，感谢你，因为你引起了我的注意

【参考方案2】：

两种选择：

vue 解析的静态链接。但它们是基于 src 的，不能与 webpack / file-loader 一起使用：

<img :src="'../assets/filename.png'"/>

适用于 webpack。注意末尾的“.default”：

<img :src="require('../assets/filename.png').default"/>

2019 年 11 月生效的相关文件： https://github.com/vuejs/vue-loader/issues/1612