您的位置:首页 > Web前端 > React

react 图像识别_无法在React中基于URL查找图像

2020-08-20 14:53 302 查看 https://blog.csdn.net/cumi7754

react 图像识别

If you're new to React and are having trouble accessing images stored locally, you're not alone.

如果您不熟悉React,并且无法访问本地存储的图像,那么您并不孤单。

Imagine you have your images stored in a directory next to a component like this:

想象一下,您的图像存储在这样的组件旁边的目录中:

/src
/components
- component1
- component2
/img
- img1
- img2

And you're trying to access the images in the

/img
directory from
component2
:

而且您正在尝试从

component2
访问
/img
目录中的图像:

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom'
import { useTransition, animated, config } from "react-spring";
import imgArr from './images';
import '../App.css';

const Slideshow = () => {
const [index, set] = useState(0)
const transitions = useTransition(imgArr[index], item => item.id, {
from: { opacity: 0 },
enter: {opacity: 1 },
leave: { opacity: 0 },
config: config.molasses,
})
useEffect(() => void setInterval(() => set(state => (state + 1) % 4), 2000), [])
return transitions.map(({ item, props, key }) => (
<animated.div
key={key}
className="bg"
style={{ ...props, slideshowContainerStyle}}
>
<img className="img" src={require(item.url)} alt=""/>
</animated.div>
))
}

const slideshowContainerStyle = {
width: '80%',
height: '300px'
}

export default Slideshow;

You've tried the paths

../img/img1.jpg
and
..img/img1.jpg
, but get
Error: Cannot find module '<path>'
.

您已经尝试了

../img/img1.jpg
..img/img1.jpg
路径,但得到
Error: Cannot find module '<path>'

So what's going on here?

那么这是怎么回事?

关于
create-react-app
(A little about
create-react-app
)

Like most people, you probably used

create-react-app
to bootstrap your project.

像大多数人一样,您可能使用了

create-react-app
来引导您的项目。

In that case, using relative paths can be a bit tricky because

create-react-app
builds the HTML, CSS, and JavaScript files to an output folder:

在这种情况下,使用相对路径可能会有些棘手,因为

create-react-app
将HTML,CSS和JavaScript文件构建到输出文件夹中:

/public
- index.html
- bundle.js
- style.css

There are a number of ways to use images with

create-react-app
, but one of the easiest is to include your images into
/public
. When your project is built,
/public
serves as the root directory.

通过

create-react-app
有多种使用图像的方法,但是最简单的方法之一就是将图像包含在
/public
。 构建项目时,
/public
充当根目录。

You can read more about adding images or other assets in the Create React App docs.

您可以在Create React App文档中阅读有关添加图像或其他资产的更多信息。

汇入图片 (Importing images)

If you took a look at the docs, you'll notice that the code includes

import
statements to load assets like images and fonts.

如果您看一下文档,您会注意到该代码包含

import
语句,以加载诸如图像和字体之类的资产。

Importing is useful when your asset, in this case an image, is in the same directory or near the component that uses it, and won't be used anywhere else. For example, if you have an input component with buttons that use SVGs for thumbs up and thumbs down icons.

当您的资产(在这种情况下为映像)位于使用该资产的目录中或该组件附近,并且在其他任何地方都不会使用时,导入很有用。 例如,如果您有一个带有按钮的输入组件,这些按钮使用SVG表示大拇指和大拇指向下的图标。

A bit advantage of using

import
is that it will throw an error during build time if there's a typo. This sort of checking helps ensure users won't see a broken image that slipped by.

使用

import
一个优点是,如果有错字,它将在构建期间引发错误。 这种检查有助于确保用户不会看到滑动的破损图像。

翻译自: https://www.freecodecamp.org/news/unable-to-find-images-based-on-url-in-react/

react 图像识别

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: